Vue2.0 学习 第三组 条件语句
本笔记主要参考菜鸟教程和官方文档编写。
1.v-if
在div或者之类的dom中使用v-if可以控制是否插入该dom,控制由v-if的true和false决定。
如:
<div id="app">
<div v-if="test"></div>
</div>
<script>
new Vue({
el:"#app",
data:{
test:true}
})
</script>
2.v-show
其实说v-show是条件控制语句我是认为很奇怪的,因为咋一看它实现的功能和你看见的控制都和v-if一模一样,但实际上只是表面上一致,v-if在本质上控制的是dom元素的添加与删除,而v-show是控制的dom元素的显示与不显示,这也意味着,v-show不管是true和false,虽然页面看起来变化了,但是本质上dom就在那,只是被添加css--display:none,隐形了。
<div id="app">
<div v-SHOW="test"></div>
</div>
<script>
new Vue({
el:"#app",
data:{
test:true}
})
</script>
3.v-else
本质是和c语言的if/else语言一样的功能,为v-if 是false提供其他选择,
如下
<div id="app">
<p v-if="seen">test</p>
<p v-else>real</p>
</div>
<script>
new Vue({
el:"#app",
data:{
test:false
}
})
</script>
4.v-else-if
同上,只不过这个语句可以设置多个实现多项判断、
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>