v-show
和 v-if
都是 Vue.js 中用于条件渲染的指令,但它们的工作方式和应用场景有所不同。
共同点
- 条件渲染 :
v-show
和v-if
都是根据条件来决定是否渲染某个元素。 - 响应式:当条件变化时,两者都会重新评估条件,并根据新的条件来更新 DOM。
不同点
-
渲染方式
- v-if :当条件为
true
时,它才会渲染元素;当条件为false
时,它不会渲染元素。这意味着,当条件改变时,Vue 会销毁和重建元素。因此,如果元素或其子元素包含大量计算或监听器,v-if
可能会带来性能上的开销。 - v-show :无论条件如何,它都会渲染元素,但根据条件来切换元素的
display
CSS 属性。当条件为true
时,元素可见;当条件为false
时,元素隐藏。这意味着元素始终存在于 DOM 中,只是其可见性发生了变化。
- v-if :当条件为
-
初始渲染
- 当页面首次加载时,如果
v-if
的条件为false
,则不会渲染该元素。而v-show
无论条件如何都会渲染元素,只是初始时可能会设置为隐藏。
- 当页面首次加载时,如果
-
性能考虑
- 如果元素在条件切换时不需要重新渲染(例如,只是简单地显示或隐藏),则
v-show
更为高效。但如果条件切换涉及到大量数据的改变或子组件的销毁和重建,那么v-if
可能会更合适。
- 如果元素在条件切换时不需要重新渲染(例如,只是简单地显示或隐藏),则
详细代码示例
v-if 示例
`<template>
<div>
<p v-if="showMessage">这条消息会根据条件显示或隐藏。</p>
<button @click="toggleMessage">切换消息显示</button>
</div>
</template>
<script>
export default {
data() {
return {
showMessage: true
};
},
methods: {
toggleMessage() {
this.showMessage = !this.showMessage;
}
}
};
</script>`
在这个 v-if
示例中,当 showMessage
为 true
时,<p>
元素会被渲染;当点击按钮切换 showMessage
的值时,<p>
元素会被销毁或重新创建。
v-show 示例
`<template>
<div>
<p v-show="showMessage">这条消息始终在 DOM 中,但会根据条件显示或隐藏。</p>
<button @click="toggleMessage">切换消息显示</button>
</div>
</template>
<script>
export default {
data() {
return {
showMessage: true
};
},
methods: {
toggleMessage() {
this.showMessage = !this.showMessage;
}
}
};
</script>
<style scoped>
p[v-show="false"] {
display: none;
}
</style>`
在这个 v-show
示例中,无论 showMessage
的值如何,<p>
元素始终存在于 DOM 中。当 showMessage
为 true
时,<p>
元素可见;当点击按钮切换 showMessage
的值时,Vue 会通过改变元素的 display
属性来隐藏或显示它,而不是销毁或重新创建元素。