v-show和v-if

原创于 2020-04-11 18:41:24 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文探讨了Vue中v-show与v-if指令的区别，详细解释了它们如何在DOM操作、初始渲染消耗及频繁切换场景下的表现。通过示例代码展示了不同布尔值下两者的行为差异。

v-show和v-if

区别：

v-show=“布尔”	v-if=“布尔”
操作css	操作dom
适合频繁切换	适合不频繁切换
初始渲染消耗	频繁切换回有消耗

    <div id="app">
      <div v-show="bl">show</div>
      <div v-if="bl">if</div>
    </div>

    <script>
      let vm = new Vue({
        el:'#app',
        data:{
          bl:false,
        }
      })
    </script>

布尔值为false时
在这里插入图片描述
布尔值为true时