vue实现条件判断

Vue 条件判断实现方法

Vue 提供了多种方式实现条件判断，以下是常用的几种方法：

v-if 指令

使用 v-if 指令根据条件渲染或销毁元素：

<div v-if="isVisible">这段内容会根据条件显示或隐藏</div>

v-else 指令

与 v-if 配合使用，当 v-if 条件不满足时显示：

<div v-if="isAdmin">管理员内容</div>
<div v-else>普通用户内容</div>

v-else-if 指令

实现多条件判断：

<div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 60">及格</div>
<div v-else>不及格</div>

v-show 指令

通过 CSS 控制显示/隐藏，元素始终存在 DOM 中：

<div v-show="isActive">这段内容会通过 display 属性切换</div>

计算属性

对于复杂条件判断，可以使用计算属性：

computed: {
  displayMessage() {
    return this.isLoggedIn ? '欢迎回来' : '请登录'
  }
}

方法判断

在模板中调用方法进行条件判断：

<div>{{ getUserStatus() }}</div>

methods: {
  getUserStatus() {
    return this.user.active ? '活跃' : '非活跃'
  }
}

条件渲染组件

根据条件渲染不同组件：

<component :is="currentComponent"></component>

选择建议

• 需要频繁切换显示/隐藏时使用 v-show
• 条件不太可能改变时使用 v-if
• 复杂逻辑建议使用计算属性或方法
• 多条件分支使用 v-else-if 链式结构