Vue的学习之路十一：v-if 与 v-show 的使用

最新推荐文章于 2022-11-29 00:11:04 发布

亥虫

最新推荐文章于 2022-11-29 00:11:04 发布

阅读量3.3k

点赞数

分类专栏： # Vue 文章标签： vue 前端 html vue.js javascript

本文链接：https://blog.csdn.net/weixin_39020133/article/details/106300523

版权

Vue 专栏收录该内容

17 篇文章 4 订阅

订阅专栏

<body>
    <div id="app">
      <input type="button" @click="toggle" value="toggle" />

      <!-- 每次都会重新删除或创建元素 -->
      <h3 v-if="flag">这是v-if控制的元素</h3>
      <!-- 每次不会重新进行DOM的删除和创建操作，只是切换了元素的display: none 样式 -->
      <h3 v-show="flag">这是v-show控制的元素</h3>

      <!-- v-if 有较高的切换性能消耗 -->
      <!-- v-show 有较高的初始渲染消耗 -->
      <!-- 如果元素涉及到频繁的切换，最好不要使用 v-if，则推荐使用 v-show -->
      <!-- 如果元素可能永远也不会显示出来被用户看到，则推荐使用 v-if -->
    </div>

    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          flag: true,
        },
        methods: {
          toggle() {
            this.flag = !this.flag
          },
        },
      })
    </script>
  </body>

v-if 与 v-show的区别：v-if每次都会重新删除或创建元素，v-show不会重新进行DOM的删除和创建操作，只是切换了元素的display: none 样式
性能方面：v-if 有较高的切换性能消耗，v-show 有较高的初始渲染消耗
总结：如果元素涉及到频繁的切换，最好不要使用 v-if，推荐使用 v-show，如果元素可能永远也不会显示出来被用户看到，则推荐使用 v-if

亥虫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue的学习之路十一：v-if 与 v-show 的使用

<body> <div id="app"> <input type="button" @click="toggle" value="toggle" />  <h3 v-if="flag">这是v-if控制的元素</h3> <!-- 每次不会重新进行DOM的删除和创建操作，只是切换了元素的display: none 样式 --&gt
复制链接

扫一扫