v-指令 v-if v-else v-show v-for v-on
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:可以简写为@