Hi，我是前端人类学！
在 Vue 开发和日常 JS 编写中，我们经常遇到条件判断渲染、变量赋值的场景，新手最容易写出多层嵌套的if-else，不仅代码臃肿、可读性差，还容易出错。
其实三元表达式是极简代码的神器，一行就能替代多层 if 判断，在 Vue 模板、JS 逻辑中都能无缝使用。本文带你从基础到实战，彻底掌握三元表达式的简化技巧！

---

---

一、什么是三元表达式？

三元表达式是 JavaScript 中唯一有三个操作数的运算符，语法：

条件 ? 条件为真时执行 : 条件为假时执行

核心作用：简化简单的条件判断，替代单行 if-else，让代码更简洁。

二、基础对比：if VS 三元表达式

先看最基础的场景，直观感受简化效果：

1. 变量赋值场景

// 臃肿写法：多层if判断
let statusText;
if (user.age >= 18) {
  statusText = "已成年";
} else {
  statusText = "未成年";
}

// 简化写法：三元表达式
let statusText = user.age >= 18 ? "已成年" : "未成年";

2. Vue 模板渲染

Vue 中不能直接写 if 语句，用三元表达式一行搞定渲染：

<!-- 繁琐：模板只能用v-if/v-else，代码冗余 -->
<p v-if="isLogin">欢迎回来</p>
<p v-else">请先登录</p>

<!-- 极简：三元表达式 -->
<p>{{ isLogin ? '欢迎回来' : '请先登录' }}</p>

三、进阶：多条件判断，替代多层 if-else

很多人觉得三元表达式只能处理单条件，其实嵌套三元表达式可以完美替代多层 if-else if-else，代码更紧凑！

场景：根据分数判断等级（多层 if）

// 多层if嵌套，代码冗长
let level;
if (score >= 90) {
  level = "优秀";
} else if (score >= 60) {
  level = "及格";
} else {
  level = "不及格";
}

简化：三元表达式一行搞定

// 嵌套三元表达式，逻辑清晰，代码极简
let level = score >= 90 ? "优秀" : score >= 60 ? "及格" : "不及格";

优势：去掉了大括号、变量声明，一行代码完成所有条件判断。

四、Vue 实战高频用法

在 Vue 项目中，三元表达式是模板渲染、样式绑定、类名绑定的必备技巧：

1. 动态类名绑定（最常用）

<template>
  <!-- 单行三元表达式，替代v-if重复写标签 -->
  <div :class="isActive ? 'active-class' : 'default-class'">按钮</div>
</template>

2. 动态样式绑定

<div :style="{ color: status === 'success' ? 'green' : 'red' }">
  {{ statusText }}
</div>

3. 列表渲染 + 条件判断

配合v-for使用，简化渲染逻辑：

<template>
  <div v-for="item in list" :key="item.id">
    {{ item.status === 1 ? '已完成' : item.status === 2 ? '进行中' : '未开始' }}
  </div>
</template>

4. Vue3 Setup 语法糖中使用

// Vue3 组合式API
const isLogin = ref(false)
const tip = computed(() => isLogin.value ? '欢迎用户' : '请登录')

五、三元表达式 + 逻辑运算符，极致简化

结合 && / || 运算符，能进一步简化单分支判断：

1. 替代只有 if 的判断

// 原写法
if (user.vip) {
  showVipIcon = true;
}

// 简化：三元表达式
showVipIcon = user.vip ? true : false;

// 极致简化：逻辑运算符
showVipIcon = !!user.vip;

2. 默认值赋值

// 常规三元
let name = user.name ? user.name : "未知用户";

// ES6简化（||运算符）
let name = user.name || "未知用户";

六、重要原则：什么时候用？什么时候不用？

推荐使用场景

1. 简单的变量赋值、渲染文本
2. Vue 模板中动态类名 / 样式
3. 2~3 层的简单条件判断
4. 代码需要一行极简实现

不推荐使用场景

1. 超过 3 层的嵌套（可读性会变差）
2. 条件内部需要执行多行代码 / 复杂逻辑
3. 团队协作中，新手难以理解的深层嵌套

最佳实践：简单判断用三元，复杂逻辑用 if/switch，兼顾简洁和可读性！

七、完整 Vue 实战示例

<template>
  <div class="user-card">
    <!-- 三元表达式渲染文本 -->
    <h3>{{ userInfo.name || '未设置昵称' }}</h3>
    <p>{{ userInfo.age >= 18 ? '成年' : '未成年' }}</p>
    
    <!-- 三元表达式动态类名 -->
    <span :class="userInfo.vip ? 'vip-tag' : 'normal-tag'">
      {{ userInfo.vip ? 'VIP会员' : '普通用户' }}
    </span>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const userInfo = ref({
  name: '',
  age: 20,
  vip: false
})
</script>

---

三元表达式是 Vue/JS 简化代码的核心技巧，能完美替代单层 / 双层 if 判断，在 Vue 模板中更是无可替代。
用好它，能让你的代码：

1. 行数大幅减少
2. 可读性更高
3. 开发效率提升
4. 告别臃肿的多层 if 嵌套

建议大家在日常开发中，优先用三元表达式处理简单条件，让代码更优雅！