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>