09.v-if指令 

<body>
    <div id="app">
        <button @click="toggleIsShow">切换显示状态</button>
        <p v-if="isShow">我是一个段落 v-if</p>
        <p v-show="isShow">我是一个段落 v-show</p>
        <h2 v-if="temperature >30">热死啦</h2>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        // v-if 和 v-show都是根据真假切换元素  不同的是
        // v-if 是直接操作DOM树 对性能消耗比较大  如果频繁操作的元素用 v-show  反之用 v-if

        var app = new Vue({
            el: '#app',
            data: {
                isShow: true,
                temperature: 40
            },
            methods: {
                toggleIsShow: function() {
                    this.isShow = !this.isShow;
                }

            }
        })
    </script>
</body>

 

posted @ 2020-12-28 21:43  闭上耳朵  阅读(90)  评论(0)  编辑  收藏  举报