Vue三元表达式

基础语法

三元表达式的通用写法：

• condition：布尔表达式

• valueIfTrue：条件为真时返回的值

• valueIfFalse：条件为假时返回的值

Vue2 中的使用

1. 模板插值

<template><p>{{ isLogin ? '欢迎回来' : '请先登录' }}</p>
</template><script>
export default {data() {return { isLogin: false }}
}
</script>

2. 动态属性绑定

<button :disabled="isDisabled ? true : false">提交</button>

3. 条件渲染

<div v-if="show ? true : false">显示内容</div>

4. 计算属性中

computed: {userRole() {return this.isAdmin ? '管理员' : '普通用户'}
}

Vue3 中的使用

Vue3 在模板里三元表达式写法 完全相同，但在 <script setup> 或 Composition API 中更常见。

1. <script setup> + 模板

<script setup>
import { ref } from 'vue'
const isLogin = ref(true)
</script><template><p>{{ isLogin ? '欢迎回来' : '请先登录' }}</p>
</template>

2. 动态属性

<el-button :type="status === 1 ? 'success' : 'danger'">{{ status === 1 ? '启用' : '禁用' }}
</el-button>

3. 计算属性（Composition API）

<script setup>
import { ref, computed } from 'vue'
const isAdmin = ref(false)
const role = computed(() => isAdmin.value ? '管理员' : '普通用户')
</script><template><p>{{ role }}</p>
</template>

Vue2 vs Vue3 对比总结

对比点	Vue2	Vue3
语法	使用 {{ condition ? A : B }}，完全支持	语法相同
数据来源	data、computed、methods	ref、reactive、computed
模板中使用	插值、属性绑定、条件渲染	插值、属性绑定、条件渲染
逻辑复杂度	建议放到 computed	建议放到 computed 或 setup 里
最佳实践	避免嵌套三元，复杂逻辑放 computed	同样建议，尤其在 <script setup> 中更清晰

最佳实践建议

1. 简单条件 → 模板里直接用三元表达式，简洁明了

   <span>{{ visible ? '显示' : '隐藏' }}</span>
   

2. 复杂逻辑 → 放到 computed 或方法里，避免嵌套三元导致难读

   computed: {statusText() {return this.isLogin? (this.isAdmin ? '超级管理员' : '普通用户'): '未登录'}
   }
   

3. Vue2 与 Vue3 → 三元表达式本身没区别，区别在于数据管理方式（data vs ref/reactive）。