Vue2条件渲染

定义

条件渲染：控制显示与隐藏可以用两种方法

v-if

写法

(1)v-if=“表单式”
(2)v-else-if=“表单式”
(3)v-else=“表达式”

适用场景

切换频率低的场景

特点

不展示DOM元素直接被移除

注意

v-if可以和v-else-if、v-else 一起使用，但要求结构不能被打断。
template:两个即两个以上的div需要同一个元素控制的时候，用template。

在使用template时，v-show将失去作用。因为v-show是设置显示与隐藏，而template是没有实际东西的dom，所以v-show与template联合使用将失效。

使用案例

<div id="root">
 <template v-if="showFlag">
     <div>a</div>
     <div>b</div>
     <div>c</div>
 </template>
</div>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
           showFlag:true
        }
    })
</script>

v-show

写法

v-show=“表达式”

适用场景

切换频繁率较高的场景

特点

不展示DOM元素，未被移除，仅仅用样式隐藏掉display

备注

使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到