简介
Vue vif
代码演示
<html>
<head>
<title>Vue v-if</title>
<style>
table, th, td {
border: 1px solid black;
width: 500px;
text-align: center;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<div id = "app">
<table>
<thead>
<th>ID</th>
<th>头像</th>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
<th>评级</th>
</thead>
<tbody>
<tr v-for="emp in empList" :key = "emp.id">
<td>{{emp.id}}</td>
<td><img v-bind:src = "emp.img" :alt = "emp.name" width="50px"></td>
<td>{{emp.name}}</td>
<td>{{emp.age}}</td>
<td>{{emp.score}}</td>
<td>
<!-- v-if 控制元素是否显示 -->
<!-- 语法： v-if = "条件表达式" -->
<!-- 表达式为 true 时显示 false 时隐藏 -->
<!-- 可以用 v-else-if v-else 添加多个分支 -->
<!-- 适用于不频繁切换是否显示的元素 -->
<!-- 与 v-show 区别在于 v-if 表达式为 false 是在html页面中移除对应元素 -->
<span v-if = "emp.score >= 90">优秀</span>
<span v-else-if = "emp.score >= 70">良好</span>
<span v-else-if = "emp.score >= 60">及格</span>
<span v-else>不及格</span>
</td>
</tr>
</tbody>
</table>
</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data(){
return {
empList: [
{
id: 1,
img: "http://blog.zqat.top/wp-content/uploads/2025/05/cropped-b_4661cf5da8cf1caafe9574a52f3f9430.jpg",
name: '小王',
age: 18,
score: 90
},
{
id: 2,
img: "http://blog.zqat.top/wp-content/uploads/2025/05/cropped-b_4661cf5da8cf1caafe9574a52f3f9430.jpg",
name: '小李',
age: 19,
score: 80
},
{
id: 3,
img: "http://blog.zqat.top/wp-content/uploads/2025/05/cropped-b_4661cf5da8cf1caafe9574a52f3f9430.jpg",
name: '小张',
age: 20,
score: 50
}
]
}
}
}).mount('#app')
</script>
</body>
</html>效果
