用 computed 替代模板三元运算可提升可读性、复用性和可测试性；将状态映射、条件样式、多字段组合逻辑及常量管理抽离至 computed，使模板简洁语义明确。

用 computed 替代模板里的三元运算，核心是把逻辑从模板抽离到响应式计算属性中，既提升可读性，又便于复用和测试。

把复杂判断逻辑移到 computed 中

模板里写 {{ status === 'active' ? '在线' : status === 'offline' ? '离线' : '未知' }} 既冗长又难维护。改成 computed 后更清晰：

computed: {
  displayStatus() {
    const map = { active: '在线', offline: '离线' }
    return map[this.status] || '未知'
  }
}

模板中直接写 {{ displayStatus }}，语义明确、无嵌套、易扩展。

处理带条件的样式或类名

避免在 :class 或 :style 里堆三元表达式，例如：

<div :class="type === 'error' ? 'alert-error' : type === 'warn' ? 'alert-warn' : 'alert-info'">

<p>换成 computed 更干净：</p>
<font color="#666">
<pre class="brush:php;toolbar:false;">computed: {
  alertClass() {
    return `alert-${this.type || 'info'}`
  }
}

模板中只需 :class="alertClass"，还天然支持默认值和拼接逻辑。

组合多个响应式数据生成状态文本

当显示内容依赖多个字段（如 loading、error、data），模板三元会迅速失控：

{{ loading ? '加载中...' : error ? '加载失败' : data?.length ? '已就绪' : '暂无数据' }}

用 computed 拆解状态优先级，逻辑一目了然：

computed: {
  statusText() {
    if (this.loading) return '加载中...'
    if (this.error) return '加载失败'
    if (this.data?.length) return '已就绪'
    return '暂无数据'
  }
}

后续加日志、国际化或状态映射都只需改这一处。

配合方法或常量提升可维护性

把硬编码字符串提取为常量或复用函数，让 computed 更健壮：

const STATUS_LABELS = {
  active: '活跃',
  pending: '待审核',
  rejected: '已拒绝'
}

computed: {
  label() {
    return STATUS_LABELS[this.userStatus] || STATUS_LABELS.pending
  }
}

这样修改文案不用动模板，也不用搜遍所有三元表达式。