说明
v-show和v-if的用法看起来是一致的,也是根据一个条件决定是否显示元素或者组件
<template>
<div id="app">
<button>1</button>
<button>2</button>
<button v-show="isDisplay">3</button>
<div class="change" @click="show">改变</div>
</div>
</template>
<script>
export default {
data() {
return {
isDisplay: false
};
},
methods: {
show() {
this.isDisplay = !this.isDisplay
}
}
};
</script>
和v-show的区别
1、用法上
不支持 元素, v-show 只是修改css里面的display属性, 一般来说,v-if 有更高的切换开销(因为每次都要重新加载),而 v-show 有更高的初始渲染开销(直接加载,只是不显示出来)。 因此,如果需要非常频繁地切换,则使用 v-show 较好;
不支持 v-else。
2、本质上
v-if 当条件为false时,其对应的元素压根不会被渲染到DOM中;如何选择
如果在运行时条件很少改变,则使用 v-if 较好。