javascript - vue 計算屬性怎麼傳參

Question

計算屬性怎麼傳參？

<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;
        }
    }
}

Answer 1

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

Answer 2

首先，計算屬性裡的方法是傳不了參的，根據你的程式碼我想你想要實現的是根據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;
        }
    }
}

Answer 3

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

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

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

Answer 4

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]
    }
  }
}
// ...