Vue_v-if和v-show的使用和特点

标签：运行时   控制   flag   初始   style   查看   put   使用   input   

一般来说，v-if有更高的切换消耗而v-show有更高的初始渲染消耗。因此，如果需要频繁切换v-show较好，如果在运行时条件不大可能改变v-if较好

<div id="app">
    <input type="button" value="toggle" @click="toggle">
    <h3 v-if="flag">这是用v-if控制的元素</h3>
    <h3 v-show="flag">这是用v-show控制的元素</h3>
</div>

var vm=new Vue({
    el:"#app",
    data:{
        flag:true
    },
    methods:{
        toggle(){
            thsi.flag=!this.flag;
        }
    }
});

点击之后可以发现两个h3元素消失了，但是打开开发者工具可以看到两者的区别：写了v-show语句的<h3>标签在查看时会发现它的标签内写好了style属性，这表明v-show是通过标签内写入内联样式"display:none;"来隐藏元素的。而v-if语句的位置变成了一个空的注释语句，这表明原h3元素被其替换了

• v-if是通过DOM操作来达到隐藏效果。v-show只是通过改变style属性的display的值来达到隐藏效果。

Vue_v-if和v-show的使用和特点

标签：运行时   控制   flag   初始   style   查看   put   使用   input   

原文地址：https://www.cnblogs.com/Syinho/p/12367681.html