javascript - Comment transmettre des paramètres aux propriétés calculées de Vue

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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