条件渲染

v-show

v-show:false不显示内容

v-show="1===3"

v-show="a" 数据绑定a：false

v-if

通过点击按钮实现n+1，展现出新的字符

   <div id="vif">
        <h2>{{n}}</h2>
        <button @click="n++">n+1</button>
        <div v-if="n===1">1</div>
        <div v-if="n===2">2</div>
        <div v-if="n===3">3</div>

v-else和v-else-if

   <div id="vif">
        <h2>{{n}}</h2>
        <button @click="n++">n+1</button>
        <div v-if="n===1">1</div>
        <div v-else-if="n===2">2</div>
        @
        <div v-else-if="n===3">3</div>
        <div v-else="n===4">4</div>

代码运行截图：

条件渲染中间艾特报错.png 代码一开始的n默认是0，所以执行了4，显示v-else的内容。 v-if和v-else是一组判断，如果有多组判断建议使用v-else v-if最前面，中间不可用其他元素断开否则失效 v-else前面的执行了后面的就不会执行了因为js中if-else，if执行了后else就不用执行了。

v-if与template的配合使用

如图的代码过于麻烦思考可以简写为图二div嵌套的样子

条件渲染-代码1.png

条件渲染代码2.png

,图二的代码中多余的div破坏了结构（原来只有三个h2，后来多余出来了一堆div），选用template替换div不会破坏结构但是注意tempalte只能配合v-if不能配合v-show

    <div id="render">
        <h2>{{n}}</h2>
        <button @click="n++">n+1</button>
        <template v-if="n===1">
            <h2>hello</h2>
            <h2>dog</h2>
            <h2>cat</h2>
        </template>

    </div>

    <script>
        const vm = new Vue({
            el: '#render',
            data: {
                n: 0
            }
        })
    </script>

条件渲染templatev-if.png 如果使用template和v-show最初是n的值是0不需要点击页面就显示数据了，不符合逻辑，所以不能这么用。 v-if点击按钮n+1=1，页面内容正常使用

条件渲染总结

v-if 写法：（1）.v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式" 适用于：切换频率较低的场景。特点：不展示的DOM元素直接被移除注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”
v-show 写法：v-show=“表达式” 适用于：切换频率较高的场景特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到。

Vue的条件渲染学习笔记