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

Question

我期望根据模板中的数据返回三个、两个以上的不同值。我知道如果有两个条件如何使用它，但是有没有办法使用两个以上的条件？给我一个语法错误。

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

Answer 1

如果我理解正确，请查看以下代码片段：（您可以映射更改类型并使用计算属性返回它们）

const app = Vue.createApp({
  data() {
    return {
      changes: [1,2,3],
      changeTypes: new Map([
        [1, 'One change'],
        [2, 'Two changes'],
        [3, 'Three changes']
      ])
    };
  },
  computed: {
    getChanges() {
      return this.changes.map(c => {
        return this.changeTypes.get(c)
      })
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <select>
  <option v-for="change in getChanges">
    {{ change }}
  </option>
  </select>
</div>