v-if

1
2
3
4
5
6
7
8
9
10
11
<div id="app">
<p v-if="flag">flag是true就显示我</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
flag: true
}
})
</script>

v-else

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
<p v-if="flag">flag==true</p>
<p v-else>flag==false</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
flag: true
}
})
</script>

v-else-if

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
<p v-if="type==='A'">A</p>
<p v-else-if="type==='B'">B</p>
<p v-else-if="type==='C'">C</p>
<p v-else>D</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>

v-show

1
2
3
4
5
6
7
8
9
10
11
<div id="app">
<p v-show="flag">11111111</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
flag: true
}
})
</script>