1.v-if/v-else
v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。v-else必须跟着v-if,充当else功能。
<div id="example">
<p v-if="greeting">Hello</p>
<p v-else="greeting">Hi</p>
<template v-if="ok">
<h1>Tiele</h1>
<p>Paragraph</p>
</template>
</div>
var exampleVM2=new Vue({
el: '#example',
data: {
greeting: false,
ok: true,
}
})
可以看到包装元素<template>最终是不会渲染出来,它可以用来包装多个需要切换元素。而else内容最终也不会渲染到DOM中
2.v-show
v-show指令是根据表达式的值来显示或者隐藏HTML元素内容的。
<div id="example2">
<p v-show="greeting">Hello!</p>
<p v-show="!greeting">Hi</p>
</div>
var example=new Vue({
el: '#example2',
data: {
greeting: true
}
})
将v-show用在指令上时,因为指令的优先级v-else会出现问题,所以可以通过用另一个v-show指令代替v-else,如上。
一般来说,v-if有更高的切换消耗,而v-show有更高的初始渲染消耗。因此,如果需要频繁的切换,则使用v-show较好;如果运行时条件不大可能改变,则使用v-if较好
3.v-for
我们可以使用v-for指令基于源数据重复渲染元素
<div id="demo">
<ul>
<li v-for="item in items" class="item-{{$index}}">
{{$index}} -{{parentMessage}} {{item.msg}}
</li>
</ul>
</div>
var demo= new Vue({
el: '#demo',
data: {
parentMessage: '滴滴',
items:[
{msg: '顺风车'},
{msg: '专车'}
]
}
})
$index可以用来呈现相应的数组索引,注意需要最新版本的Vue才有此功能。
4.v-on
v-on指令用于绑定事件监听器。
v-on后面不仅可以跟参数,还可以增加修饰符:
.stop -----调用event.stopPropagation(),停止冒泡
.prevent-----调用event.preventFefault(),阻止默认行为
.capture-----添加事件监听器时使用capture模式
.self------只当时间是从监听器绑定的元素本身触发时才触发回调
<div id="example">
<button @click="toggleShow">{{msg}}</button>
<p v-if="showTotal">显示</p>
</div>
var demo=new Vue({
el: "#example",
data: {
showTotal:true,
msg:'点击显示与隐藏'
},
methods:{
toggleShow:function(){
this.showTotal=!this.showTotal
}
}
})
v-on:可以简写为@