如何在Vue.js模板中使用多个三元运算符？

问题原因 #

你当前的代码出现语法错误，是因为嵌套三元运算符的结构不完整——每一层三元表达式都必须遵循条件 ? 真值 : 假值的格式，你最后一个分支只写了change === 3 ? 'Three changes'，缺少了:后面的默认 fallback 值。

修复后的嵌套三元写法 #

如果一定要用三元运算符，补全默认分支即可：

<option>{{ change === 1 ? 'One change' : change === 2 ? 'Two changes' : change === 3 ? 'Three changes' : 'Other changes' }}</option>

不过嵌套三层以上的三元可读性很差，不推荐在模板里这么写。

更优方案：使用计算属性 #

方案1：switch 语句 #

在组件的计算属性里封装逻辑，模板只负责展示：

// 组件的 script 部分
computed: {
  changeDisplayText() {
    switch (this.change) {
      case 1:
        return 'One change';
      case 2:
        return 'Two changes';
      case 3:
        return 'Three changes';
      default:
        return 'Other changes'; // 处理未匹配到的情况
    }
  }
}

模板中直接调用：

<option>{{ changeDisplayText }}</option>

方案2：对象映射 #

如果条件是明确的键值对，用对象映射会更简洁：

computed: {
  changeDisplayText() {
    const textMap = {
      1: 'One change',
      2: 'Two changes',
      3: 'Three changes'
    };
    // 若未匹配到键，返回默认值
    return textMap[this.change] || 'Other changes';
  }
}

模板用法和上面一致。

内容的提问来源于stack exchange，提问作者user21728832