v-show和v-if及区别

v-show

指令的作用是:根据真假切换元素的显示状态。
原理是修改元素的display,实现显示隐藏。
指令后面的内容,最终都会解析为布尔值,值为true元素显示,值为false元素隐藏。
数据改变之后,对应元素的显示状态会同步更新。

<body>
    <div id="app">
        <img v-show="isShow" src="../images/angel.gif" alt="">

        <input type="button" value="切换显示状态" @click="changeInShow">
        
        <input type="button" value="累加年龄" @click="addAge">
        <img v-show="age>=18" src="../images/angel.gif" alt="">
    </div>
</body>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                age: 16
            },
            methods: {
                changeInShow: function(){
                    this.isShow = !this.isShow;
                },
                addAge: function(){
                    this.age++;
                }
            }
        });
    </script>

v-if

v-if指令的作用是:根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树中移除
频繁的切换v-show,反之使用v-if前者的切换消耗小。

<body>
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <!-- v-if为false时会从DOM上下来 -->
        <p v-if="isShow">xwen</p>
        <!-- v-show为false时只是隐藏了而已 -->
        <p v-show="isShow">xwen-gz2006</p>
        <h2 v-if="temperature >= 35">热死了</h2>
    </div>    
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data:{
                isShow: false,
                temperature: 40
            },
            methods:{
                toggleIsShow:function(){
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>

v-show和v-if的区别

1.v-show是通过设置DOM元素的display样式属性控制显隐;
   v-if是动态的向DOM树内添加或者移除DOM元素;
2.v-show只是简单的基于css切换;
   v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;
3.v-show适合频繁切换;v-if切换频率低的
4.v-show性能消耗低,v-if性能消耗大

总结:如果一个元素需要频繁的做显示或者隐藏的切换操作,建议使用 v-show;如果只是一次性的操作,希望以后看不到,则建议使用 v-if。

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页