javascript - Bagaimana untuk menghantar parameter kepada sifat yang dikira vue
欧阳克
欧阳克 2017-07-05 10:47:14
0
4
1735

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;
        }
    }
}
欧阳克
欧阳克

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

membalas semua(4)
phpcn_u1582

Jika parameter tidak dapat dilalui, anda boleh menulisnya sebagai kaedah

phpcn_u1582

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;
        }
    }
}
大家讲道理

Tidakkah keperluan ini boleh diselesaikan dengan data tika objek?

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

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

过去多啦不再A梦

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]
    }
  }
}
// ...
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan