javascript - Bagaimana untuk menghantar parameter kepada sifat yang dikira vue

Question

Bagaimana untuk lulus parameter untuk atribut yang dikira?

<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

Jika parameter tidak dapat dilalui, anda boleh menulisnya sebagai kaedah

Answer 2

Pertama sekali, kaedah dalam atribut yang dikira tidak boleh melepasi parameter Menurut kod anda, saya fikir apa yang anda ingin capai adalah untuk mengembalikan warna mengikut perubahan jenis Kemudian anda harus memahami bahawa nilai yang dikembalikan oleh yang dikira atribut hanya berkaitan dengan nilai di dalamnya Ketergantungan adalah berkaitan Apabila kebergantungan berubah, sifat yang dikira akan dicetuskan untuk mengira semula dan kemudian menukar nilai, jadi anda harus membuat taip data vm, dan kemudian menjadi kebergantungan. harta yang dikira. Kod mudah adalah seperti berikut:

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

Tidakkah keperluan ini boleh diselesaikan dengan data tika objek?

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

Ikat gaya kepada {color: colors[item.type]}

Answer 4

https://cn.vuejs.org/v2/guide... penetap-pengiraan

Sifat yang dikira hanya mempunyai pengambil secara lalai, tetapi anda juga boleh menyediakan penetap apabila diperlukan:

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