v-show和v-if指令的共同点和不同点

v-showv-if 都是 Vue.js 中用于条件渲染的指令,但它们的工作方式和应用场景有所不同。

共同点

  1. 条件渲染v-showv-if 都是根据条件来决定是否渲染某个元素。
  2. 响应式:当条件变化时,两者都会重新评估条件,并根据新的条件来更新 DOM。

不同点

  1. 渲染方式

    • v-if :当条件为 true 时,它才会渲染元素;当条件为 false 时,它不会渲染元素。这意味着,当条件改变时,Vue 会销毁和重建元素。因此,如果元素或其子元素包含大量计算或监听器,v-if 可能会带来性能上的开销。
    • v-show :无论条件如何,它都会渲染元素,但根据条件来切换元素的 display CSS 属性。当条件为 true 时,元素可见;当条件为 false 时,元素隐藏。这意味着元素始终存在于 DOM 中,只是其可见性发生了变化。
  2. 初始渲染

    • 当页面首次加载时,如果 v-if 的条件为 false,则不会渲染该元素。而 v-show 无论条件如何都会渲染元素,只是初始时可能会设置为隐藏。
  3. 性能考虑

    • 如果元素在条件切换时不需要重新渲染(例如,只是简单地显示或隐藏),则 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 示例中,当 showMessagetrue 时,<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 中。当 showMessagetrue 时,<p> 元素可见;当点击按钮切换 showMessage 的值时,Vue 会通过改变元素的 display 属性来隐藏或显示它,而不是销毁或重新创建元素。

相关推荐
鹏多多8 分钟前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
用户516816614584117 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦17 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He17 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark2 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼2 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_2 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js