v-show:用于根据表达式的真假值高效地显示或隐藏元素
1.可以是Boolean类型的参数
v-show="isShow"
2.可以是判断逻辑
v-show="age>=18"
3.可以根据表格中某一项不同的值判断
v-show="scope.row.uuid === '' || scope.row.uuid === null || scope.row.uuid === undefined"
v-if: 根据表达式的真假切换元素的显示状态(与v-show同作用)
本质是通过操纵dom元素来切换显示状态,表达式的值为true,元素存在于dom树中,为false,从dom树中移除,v-show
和 v-if
都用于控制元素的显示和隐藏,但它们的使用场景有所不同。v-show
只切换元素的 display
属性,而 v-if
会在条件变化时销毁和重建元素。频繁的切换v-show,反之使用v-if,前者的切换消耗小。
v-show
适用于频繁切换显示状态的场景,例如选项卡切换。v-if
适用于条件较少变化或需要动态创建和销毁元素的场景。