16.v-if和v-show的使用

v-if和v-show只有一个作用，就是根据指定的标识符，切换元素的显示和隐藏状态。
v-if是实时的创建或者移除元素，从而达到元素的显示和隐藏
v-show是通过为元素添加或者移除display:none来实现隐藏和显示的
一般来说，v-if有更高的切换消耗而v-show有更高的初始渲染消耗，因此，如果
需要频繁切换v-show较好，如果在运行时条件不大可能改变v-if较好。

<body>
    <div id="app">
        {{ xiaoshi }}<br>
        <input type="button" value="切换" @click="xiaoshi=!xiaoshi">
        <h3 v-if="xiaoshi">点击按钮我会消失v-if,值为true显示，false消失</h3>
        <h5 v-show="xiaoshi">我跟上面一样，也会消失v-show，值为true显示，false消失</h5>
    </div>
</body>
<script>
    //创建Vue实例，得到ViewModel
    var vm=new Vue({
        el:"#app",
        data:{
            xiaoshi:true
        },
        methods:{}
    });
</script>

 

posted @ 2021-03-09 08:43  种太阳  阅读(44)  评论(0)  编辑  收藏  举报