v-show:仅仅是通过样式属性display控制元素的显示方式
true:display:block;
false: display: none;
如:
<template>
<div>
<div v-show="show">v-show</div>
<button @click="handleClick">确定</button>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
},
mounted() {
},
methods: {
handleClick(){
this.show = true;
}
}
}
</script>
false
true
v-if:用于条件性地渲染一块内容,只有当条件成立的时候才会进行渲染。
当条件成立时:
两者区别:
- 带有
v-show
的元素始终会被渲染并保留在 DOM 中 ,不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。 - 一般来说,
v-if
有更高的切换开销,而v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show
较好;如果在运行时条件很少改变,则使用v-if
较好。