v-if/v-show条件渲染指令

vue.js的条件指令v-if可根据表达式的值在DOM中渲染或销毁元素/组件。

    <div id="app">
        <p v-if="status === 1">当status为1时显示该行</p>
        <p v-else-if="status === 2">当status为2时显示该行</p>
        <p v-else>否则显示该行</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                status: 1
            }
        })
    </script>

如果一次判断的是多个元素，可以在vue.js内置的template元素上使用条件指令，最终渲染的结果不会包含该元素。

    <div id="app">
        <template v-if="status === 1">
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </template>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                status: 1
            }
        })
    </script>

v-show是改变元素的CSS属性display,当v-show表达式的值为false时，元素会隐藏，查看dom结构会看到元素上加载了内联样式display:none；v-show不能在template上使用。

    <div id="app">
        <p v-show="status === 1">当status为1时显示该行</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                status: 2
            }
        })
    </script>

v-if与v-show的选择

v-if是真正的条件渲染，会根据表达式适当的销毁或重建元素及绑定的事件或子组件。
v-show是简单的CSS属性切换，无论条件真假都会被编译。
v-if适合条件不经常改变的场景，V-show适用于频繁切换条件。

本作品采用《CC 协议》，转载必须注明作者和本文链接