v-show和v-if及区别

最新推荐文章于 2024-07-02 10:59:43 发布

棋炜的小宝贝

最新推荐文章于 2024-07-02 10:59:43 发布

阅读量158

点赞数

分类专栏： v-if v-show 文章标签： vue

本文链接：https://blog.csdn.net/XWen_ING/article/details/109304643

版权

v-if 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

v-show

1 篇文章 0 订阅

订阅专栏

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。