vue指令v-if和v-show

v-show和v-if

v-if

语法：v-if="表达式"表达式为true显示；fals隐藏

v-if用于条件性地渲染元素。当条件为 true时，元素将被渲染；当条件为 false时，元素不会被渲染到 DOM 中。

v-if可以和 v-else及 v-else-if阶梯使用，提供更复杂的条件渲染逻辑。

使用 v-if的元素会在切换条件时进行创建和销毁的 DOM 操作，这可能涉及更重的性能成本，特别是当条件频繁变化时。

v-if适用于条件不经常改变的情况，或者当涉及条件渲染的元素包含很重的初始化工作如数据获取等。

v-show

语法：v-show="表达式"表达式为true显示；fals隐藏

v-show用于切换元素的可见性。它本质上是设置 CSS 的 display属性。不管条件的值如何，元素始终会被渲染到 DOM 中，通过 display属性的 none或者空字符串值来控制元素的显示和隐藏。

v-show不支持使用 <template>标签和 v-else或 v-else-if指令。

由于元素始终存在于 DOM 中，切换它的可见性开销较小。所以，v-show更适用于需要频繁切换显示状态的元素。

v-show适用于初始渲染成本较低，但需要频繁切换可见性的场合。

实例

html

    <div id="app">
        <div v-show="hide">我是v-show的盒子</div>
        <div v-if="hide">我是v-if的盒子</div>
    </div>

javascript

        new Vue({
            el: '#app',
            data: {
                hide: false,
            }
        });