<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>
vue2元素显示隐藏v-if与v-show
于 2023-06-13 19:15:46 首次发布
文章讨论了Vue.js中v-if和v-show指令的区别,包括它们在隐藏元素时的不同处理方式——v-if删除节点,v-show使用CSS,以及在不同场景下的性能考量。建议在后台管理中优先使用v-if,因其安全性更高。
摘要由CSDN通过智能技术生成