v-bind :语法糖 根据多种状态绑定不同的值

需求如下
当item.Id为100 用valueA的值
当item.Id为200 用valueB的值
当item.Id为其他 用valueC的值

解决方法

:value="getValue(item)"  // 方案一： 绑定一个方法，在方法中判断

:value="item.Id === '100' ? item.valueA : (item.Id === '200' ? item.valueB : item.valueC)"  // 方案二： 三元表达式嵌套

:value="(item.Id==='100'&&item.valueA)||(item.Id==='200'&&item.valueB)||(item.valueC)"  // 方案三： &&与||组合 短路语法

完整代码

<template>
  <div>
    <el-button @click='click(100)'>100</el-button>
    <el-button @click='click(200)'>200</el-button>
    <el-button @click='click(999)'>999</el-button>
    <!-- 以下三种绑定方案 -->
    <el-input :value="getValue(item)"></el-input>
    <el-input :value="item.Id === '100' ? item.valueA : (item.Id === '200' ? item.valueB : item.valueC)"></el-input>
    <el-input :value="(item.Id==='100'&&item.valueA)||(item.Id==='200'&&item.valueB)||(item.valueC)"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: {
        Id: '100',
        valueA: '100',
        valueB: '200',
        valueC: '999',
      }
    }
  },
  methods: {
    click(num){
      this.item.Id = '' + num
    },
    getValue(item){
      if(item.Id === '100'){
        return item.valueA
      } else if (item.Id === '200') {
        return item.valueB
      } else {
        return item.valueC
      }  
    }
  }
}
</script>