javascript - vue 計算屬性怎麼傳參
欧阳克
欧阳克 2017-07-05 10:47:14
0
4
1675

計算屬性怎麼傳參?

<ul>
    <li v-for="item in goods" :style="goodsType" v-text="item.name"></li>
</ul>

data: {
    goods: [{
        id: 2,
        type: 3,
        name: '薯片'
      },{
        id: 3,
        type: 5,
        name: '冰红茶'    
    }]
},
computed: {
    goodsType: function(type){
        switch (type) {
            case 3:
                return "color: #ff9900"
                break;
            case 5:
                return "color: #00BC0C"
                break;
        }
    }
}
欧阳克
欧阳克

温故而知新,可以为师矣。 博客:www.ouyangke.com

全部回覆(4)
phpcn_u1582

傳不了參的,你可以寫成methods

phpcn_u1582

首先,計算屬性裡的方法是傳不了參的,根據你的程式碼我想你想要實現的是根據type的改變去返回顏色,那麼你應該明白的是計算屬性返回的值只跟它裡面的依賴有關,當依賴改變的時候就會觸發計算屬性去重新計算然後改變值,所以你應該讓type變成該vm的一個數據,進而成為該計算屬性的依賴。簡單程式碼如下:

data: {
    goods: [],
    type: 0  //这个type作为你后面计算属性的依赖项,通过其他方法改变它的值即可。
},
computed: {
    goodsType: function(){
        //这里将会依赖于此vm的type值,当type值改变,就会重新计算
        switch (this.type) {
            case 3:
                return "color: #ff9900"
                break;
            case 5:
                return "color: #00BC0C"
                break;
        }
    }
}
大家讲道理

這個需求用一個物件實例資料不就可以解決了嗎?

colors: {
  3: '#ff9900',
  5: '#00BC0C'
}

綁定 style 為 {color: colors[item.type]}

过去多啦不再A梦

https://cn.vuejs.org/v2/guide...計算-setter

計算屬性預設只有 getter ,不過在需要時你也可以提供一個 setter :

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!