Vue中v-if和v-show区别与用法解析

一、v-if和v-show的异同点1.相同点：v-if和v-show都可以动态控制DOM元素的显示隐藏。2.不同点：v-if是动态地向DOM树中添加或删除DOM元素节点；v-show是通过向DOM元素设置样式display属性值控制显示隐藏。我们通过一个简单的demo对比观察下：<body><div id="app"><div v...

等周末的爱码士

10559人浏览 · 2020-02-13 18:41:51

等周末的爱码士 · 2020-02-13 18:41:51 发布

一、v-if和v-show的异同点
1.相同点 ：v-if和v-show都可以动态控制DOM元素的显示隐藏。
2.不同点：v-if是动态地向DOM树中添加或删除DOM元素节点；v-show是通过向DOM元素设置样式display属性值控制显示隐藏。
我们通过一个简单的demo对比观察下：

<body>
    <div id="app">
        <div v-if="isIf"><p>我被v-if控制</p></div>
        <div v-show="isShow"><p>我被v-show控制</p></div>
        <button @click="pChange">Change</button>
    </div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            isIf:true,
            isShow:true
        },
        methods:{
            pChange(){
                this.isIf=(this.isIf===true?false:true);
                this.isShow=(this.isShow===true?false:true);
            }
        }
    })
</script>

在这里插入图片描述
这个demo用一个button按钮执行函数控制v-if和v-show的值(true/false切换)，在控制台不难看出，当两个指令值都为false时，v-if控制的元素是直接从DOM树销毁的；而v-show控制的元素还在DOM树中，只是以display:none样式隐藏元素内容。

二、v-if和v-show特性总结
1.编译方面：按控制手段和官方文献可知，v-if是惰性的，若最初指令值为false，它是不会编译的，直至指令值为true才开始局部编译存入缓存；v-show不管最初指令值为真假都会马上编译存入缓存，保留DOM。
2.消耗方面：v-if切换性能消耗较大；v-show最初渲染消耗较大。
3.适用场景：v-if适用切换条件、项目需求稳定；v-show适用频繁需要切换。
4.语法方面：v-if可与v-else、v-else-if配合使用进行判断执行，但一定需要相邻，不可中断；v-show无特殊语法。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^