vue实现条件判断

条件判断实现方式

在Vue中实现条件判断主要通过以下方法：

v-if指令

v-if指令根据表达式值的真假条件渲染或销毁元素：

<div v-if="isVisible">内容可见</div>

v-else-if与v-else

配合v-if实现多条件判断：

<div v-if="type === 'A'">类型A</div>
<div v-else-if="type === 'B'">类型B</div>
<div v-else>其他类型</div>

v-show指令

通过CSS的display属性控制显示/隐藏，元素始终保留在DOM中：

<div v-show="isActive">活跃状态</div>

计算属性

复杂条件判断推荐使用计算属性：

computed: {
  displayMessage() {
    return this.error ? this.error : this.success
  }
}

方法调用

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

<div>{{ getResultText(score) }}</div>

methods: {
  getResultText(val) {
    return val > 60 ? '及格' : '不及格'
  }
}

三元表达式

简单条件可使用模板中的三元运算：

<span>{{ isAdmin ? '管理员' : '普通用户' }}</span>

使用场景对比

v-if适合运行时条件很少改变的场景，有更高的切换开销。v-show适合频繁切换的场景，有更高的初始渲染开销。计算属性适合复杂逻辑且需要复用的场景。