v-show指令与v-if指令区别

最新推荐文章于 2023-06-09 13:05:45 发布

正儿八经学前端

最新推荐文章于 2023-06-09 13:05:45 发布

阅读量152

点赞数

分类专栏：指令文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_42101753/article/details/106121507

版权

指令专栏收录该内容

4 篇文章 0 订阅

订阅专栏

注意区别：

相同点：元素显示与隐藏。
不同点：v-show是元素的display CSS属性，v-if是元素销毁与重建(消耗性能，少用)。

<body>
    <!-- 
      v-show: 作用控制一个元素的显示或者隐藏
      v-show="值"  这个值如果是true，就是显示  否则隐藏

      v-if="值"  也是用于控制元素的显示和隐藏
        如果值为true就是显示，如果是false就隐藏
      

      共同点：v-show和v-if都可以控制元素的显示和隐藏
      区别： v-show通过样式的显示和隐藏来控制   v-if通过创建和删除元素来控制

      v-show: 适用于需要频繁显示与隐藏切换的情况
      v-if: 适用于要么显示要么隐藏的情况
    -->
    <div id="app">
      <h1 v-show="isShow">v-show-----{{msg}}</h1>
      <h1 v-if="isShow">v-if-----{{msg}}</h1>
    </div>

    <script src="vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello',
          isShow: false
        }
      })
    </script>
  </body>

正儿八经学前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-show指令与v-if指令区别

<body> <!-- v-show: 作用控制一个元素的显示或者隐藏 v-show="值" 这个值如果是true，就是显示否则隐藏 v-if="值" 也是用于控制元素的显示和隐藏如果值为true就是显示，如果是false就隐藏共同点：v-show和v-if都可以控制元素的显示和隐藏区别： v-show通过样式的显示和隐藏来控制 v-if通过创建和删除元素来控制
复制链接

扫一扫

专栏目录