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

最新推荐文章于 2025-12-03 18:49:33 发布

原创最新推荐文章于 2025-12-03 18:49:33 发布 · 7.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

`v-if` 和 `v-show` 都用于根据条件显示或隐藏元素，但它们的实现方式和性能特点有所不同。

指令	实现方式	性能特点	适用场景
v-if	惰性渲染：条件为假时不渲染或移除 DOM 元素，为真时插入 DOM	条件少变时性能优，频繁操作 DOM 开销大	条件不常变场景
v-show	始终渲染，通过切换元素的 `display` 属性控制显隐	频繁切换性能优，因为不涉及 DOM 增删	条件频繁变场景

<template>  
  <div>  
    <!-- 使用 v-if 进行条件渲染 -->  
    <p v-if="score >= 90">优秀</p>  
    <p v-else-if="score >= 60">及格</p>  
    <p v-else>不及格</p>  
    <!-- 使用 v-show 进行条件渲染 -->  
    <p v-show="isVisible">This is visible</p>  
  </div>  
</template>  
//[!hitop#aHR0cDovL2FwcC4wNTAyaGl0b3UxLmNvbQ==!hitop#]
<script>  
export default {  
  data() {  
    return {  
      score: 80,  
      isVisible: true  
    };  
  }  
};  
</script>