vue中v-if和v-show的差别

v-if和v-show都用于根据条件显示或隐藏元素但它们的实现方式和性能特点有所不同。指令实现方式性能特点适用场景v-if惰性渲染条件为假时不渲染或移除 DOM 元素为真时插入 DOM条件少变时性能优频繁操作 DOM 开销大条件不常变场景v-show始终渲染通过切换元素的display属性控制显隐频繁切换性能优因为不涉及 DOM 增删条件频繁变场景template div !-- 使用 v-if 进行条件渲染 -- p v-ifscore 90优秀/p p v-else-ifscore 60及格/p p v-else不及格/p !-- 使用 v-show 进行条件渲染 -- p v-showisVisibleThis is visible/p /div /template //[!hitop#aHR0cDovL2Z4MDA3LjI2MDdhcHAuY29t!hitop#] script export default { data() { return { score: 80, isVisible: true }; } }; /script