v-指令 v-if v-else v-show v-for v-on
阿新 • • 發佈:2018-11-02
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:可以簡寫為@