javascript - Comment transmettre des paramètres aux propriétés calculées de Vue
欧阳克
欧阳克 2017-07-05 10:47:14
0
4
1744

Comment transmettre des paramètres pour les attributs calculés ?

<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

répondre à tous(4)
phpcn_u1582

Si les paramètres ne peuvent pas être transmis, vous pouvez les écrire sous forme de méthodes

phpcn_u1582

Tout d'abord, la méthode dans l'attribut calculé ne peut pas transmettre de paramètres. D'après votre code, je pense que ce que vous voulez réaliser est de renvoyer la couleur en fonction du changement de type. Ensuite, vous devez comprendre que la valeur renvoyée par le calculé. L'attribut est uniquement lié à la valeur qu'il contient. Les dépendances sont liées. Lorsque les dépendances changent, la propriété calculée sera déclenchée pour recalculer puis modifier la valeur, vous devez donc saisir une donnée de la machine virtuelle, puis devenir une dépendance de la machine virtuelle. propriété calculée. Le code simple est le suivant :

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

Cette exigence ne peut-elle pas être résolue avec des données d'instance d'objet ?

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

Liez le style à {color: colors[item.type]}

过去多啦不再A梦

https://cn.vuejs.org/v2/guide... calcul-setter

Les propriétés calculées n'ont que des getters par défaut, mais vous pouvez également fournir un setter si nécessaire :

// ...
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]
    }
  }
}
// ...
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal