本文系统梳理Vue.js中常用的六个核心指令。详细解析v-if条件渲染与v-show显示隐藏的底层差异，阐述v-else的配对规则，演示v-for数组遍历用法，并介绍v-bind动态属性绑定及v-on事件监听的具体实现与代码示例。
Vue.js常用指令概览与记忆方法
面对繁杂的指令体系，开发者常因记忆混淆而出错。为避免此类问题，本文采用交叉比对与穿插记忆的方法，帮助读者更牢固地掌握核心指令。
本文将重点讲解以下六个关键指令：
v-if、v-show、v-else、v-for、v-bind、v-on
条件渲染指令：v-if、v-show与v-else
1. v-if：条件渲染指令。该指令依据其后表达式的布尔值（bool值）来决定是否渲染对应的DOM元素。
示例如下：
HTML结构：
<div id="example01">
<p v-if="male">Male</p>
<p v-if="female">Female</p>
<p v-if="age>25">Age:{{age}}</p>
<p v-if="name.indexOf('lin')>0">Name:{{name}}</p>
</div>
JavaScript逻辑：
var vm= new Vue({
el:"#example01",
data:{
male:true,
female: false,
age:29,
name:'colin'
}
})
页面渲染效果：
由此可见，v-if指令仅渲染表达式值为true的元素。在此基础上引入v-show指令进行对比：v-show同样根据表达式值决定显示，但当表达式为false时，元素仍会被渲染至DOM中，并通过添加CSS样式style="display:none;"来隐藏。将上述v-if示例替换为v-show后，页面渲染效果如下：
2. v-show：与v-if功能类似，区别在于当表达式为false时，v-show会保留元素在DOM中，并为其添加CSS样式style="display:none;"以实现隐藏。
3. v-else：必须紧跟在v-if或v-show指令之后使用，否则无法生效。
当v-if或v-show的表达式为true时，v-else对应的元素不显示；当表达式为false时，v-else对应的元素则显示在页面上。
示例代码：
<div id="app">
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
<hr>
<h1 v-show="name.indexOf('cool') = 0">Name: {{ name }}</h1>
<h1 v-else>Sex: {{ sex }}</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
age: 21,
name: 'keepcool',
sex: 'Male'
}
})
</script>
列表渲染指令：v-for
4. v-for：功能类似于JavaScript中的遍历操作，语法格式为v-for="item in items"，其中items为数组，item代表数组中的单个元素。
示例代码：
CSS样式：
<style>
table,th,tr,td{
border:1px solid #ffcccc;
border-collapse: collapse;
}
</style>
HTML结构：
<div id="example03">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.sex }}</td>
</tr>
</tbody>
</table>
</div>
JavaScript数据：
<script>
var vm = new Vue({
el: '#example03',
data: {
people: [{
name: 'Jack',
age: 30,
sex: 'Male'
}, {
name: 'Bill',
age: 26,
sex: 'Male'
}, {
name: 'Tracy',
age: 22,
sex: 'Female'
}, {
name: 'Chris',
age: 36,
sex: 'Male'
}]
}
})
</script>
页面渲染效果：
属性绑定与事件监听：v-bind与v-on
5. v-bind：用于响应式地更新HTML元素的特性（attributes）。常见应用场景包括动态绑定class类名或元素的style样式。
例如，在分页功能中实现当前页码的高亮显示，即可利用v-bind指令完成。
<ul class="pagination">
<li v-for="n in pageCount">
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
</li>
</ul>
6. v-on：用于监听指定DOM元素的事件，如点击事件等。
示例代码：
<div id="example04">
<input type="text" v-model="message">
<button v-on:click="greet">Greet</button>
<!-- v-on指令可以缩写为@符号-->
<button @click="greet">Greet Again</button>
</div>
<script>
var exampleData04={
message:"Nice meeting U"
};
var vm2=new Vue({
el:"#example04",
data:exampleData04,
methods:{
greet:function(){
alert(this.message);
}
}
})
</script>
本文内容已整理至《Vue.js前端组件学习教程》，欢迎读者进一步学习阅读。
如需深入了解更多关于Vue.js组件的教程，请点击专题“Vue.js组件学习教程”进行系统学习。
以上就是本文的全部内容，希望对各位的学习有所帮助，也欢迎大家继续支持本站。