亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

v-bind :語法糖 根據多種狀態綁定不同的值

標簽:
Vue.js

需求如下
当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>

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消