Vue指令之`v-if`和`v-show`

转载于 2019-09-24 16:44:00 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaowie/p/11579181.html

文章标签：

#javascript #ViewUI

本文探讨了Vue中v-if与v-show指令的区别，v-if在条件为假时将DOM元素从页面上移除，而v-show则通过display:none隐藏元素。v-if适合条件不常变化的情况，v-show则适用于需要频繁切换显示状态的场景。

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

<body>
    <div class="box">
        <!-- v-if  等于true的时候 会把这个元素彻底移除掉-->
        <h1 v-if="flog">这里显示的是v-if绑定的数据</h1>
        <!-- v-show  等于true的时候，会把这个元素设置成display：none-->
        <h1 v-show="flog">这里显示的是v-show绑定的数据</h1>
        <input type="button" value="切换按钮" @click ="btnClick">
    </div>

    <script src="lib/vue-2.4.0.js"></script>
    <script>
        var vm=new Vue({
            el:'.box',
            data:{
                flog:true
            },
            methods:{
                btnClick:function(){
                    this.flog=!this.flog
                }
            }
        });
    </script>