javascript - vue 计算属性怎么传参
欧阳克
欧阳克 2017-07-05 10:47:14
0
4
1736

计算属性怎么传参?

<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

全部回复(4)
phpcn_u1582

传不了参的,你可以写成methods

phpcn_u1582

首先,计算属性里的方法是传不了参的,根据你的代码我想你想要实现的是根据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;
        }
    }
}
大家讲道理

这个需求用一个对象实例数据不就可以解决了吗?

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

绑定 style 为 {color: colors[item.type]}

过去多啦不再A梦

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]
    }
  }
}
// ...
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板