vue2元素显示隐藏v-if与v-show

文章讨论了Vue.js中v-if和v-show指令的区别,包括它们在隐藏元素时的不同处理方式——v-if删除节点,v-show使用CSS,以及在不同场景下的性能考量。建议在后台管理中优先使用v-if,因其安全性更高。
摘要由CSDN通过智能技术生成
 <div id="app">
    <!-- 
      v-if和v-show
        + 共同点:都可以让元素显示或隐藏
        + 不同点:
          + v-if在隐藏时会删除掉节点,在显示时会重新创建
          + v-show在隐藏时会通过css来隐藏,在显示时也是通过css来显示
          + 在初始化时v-if性能要高于v-show,在后期的切换过程中,v-show性能要高于v-if
          + 注:如果是后台管理中用到显示或隐藏,建设用 v-if,v-if它不是通过css来实现的隐藏在后台管理中有权限的话,会更安全
          ++ vue中显示或隐藏一般使用 v-if
     -->
    <h3 v-if="isshow">我是一个v-if</h3>
    <h3 v-show="isshow">我是一个v-show</h3>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data() {
        return {
          isshow: true
        }
      },
      methods: {}
    })
  </script>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值