javascript - vue 計(jì)算屬性怎么傳參
問(wèn)題描述
計(jì)算屬性怎么傳參?
<ul> <li v-for='item in goods' : 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;} }}
問(wèn)題解答
回答1:傳不了參的,你可以寫(xiě)成methods
回答2:首先,計(jì)算屬性里的方法是傳不了參的,根據(jù)你的代碼我想你想要實(shí)現(xiàn)的是根據(jù)type的改變?nèi)シ祷仡伾敲茨銘?yīng)該明白的是計(jì)算屬性返回的值只跟它里面的依賴有關(guān),當(dāng)依賴改變的時(shí)候就會(huì)觸發(fā)計(jì)算屬性去重新計(jì)算然后改變值,所以你應(yīng)該讓type變成該vm的一個(gè)數(shù)據(jù),進(jìn)而成為該計(jì)算屬性的依賴。簡(jiǎn)單代碼如下:
data: { goods: [], type: 0 //這個(gè)type作為你后面計(jì)算屬性的依賴項(xiàng),通過(guò)其他方法改變它的值即可。},computed: { goodsType: function(){//這里將會(huì)依賴于此vm的type值,當(dāng)type值改變,就會(huì)重新計(jì)算switch (this.type) { case 3:return 'color: #ff9900'break; case 5:return 'color: #00BC0C'break;} }}回答3:
這個(gè)需求用一個(gè)對(duì)象實(shí)例數(shù)據(jù)不就可以解決了嗎?
colors: { 3: ’#ff9900’, 5: ’#00BC0C’}
綁定 style 為 {color: colors[item.type]}
回答4:https://cn.vuejs.org/v2/guide...計(jì)算-setter
計(jì)算屬性默認(rèn)只有 getter ,不過(guò)在需要時(shí)你也可以提供一個(gè) 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] } }}// ...
相關(guān)文章:
1. javascript - angular使從elastichearch中取出的文本高亮顯示,如圖所示2. python bottle跑起來(lái)以后,定時(shí)執(zhí)行的任務(wù)為什么每次都重復(fù)(多)執(zhí)行一次?3. javascript - 求幫助 , ATOM不顯示界面!!!!4. 視頻文件不能播放,怎么辦?5. javascript - vue2如何獲取v-model變量名6. python - 爬蟲(chóng)模擬登錄后,爬取csdn后臺(tái)文章列表遇到的問(wèn)題7. mysql - 分庫(kù)分表、分區(qū)、讀寫(xiě)分離 這些都是用在什么場(chǎng)景下 ,會(huì)帶來(lái)哪些效率或者其他方面的好處8. javascript - 為什么在谷歌控制臺(tái) 輸出1的時(shí)候,輸出的1立馬就不見(jiàn)了9. html5 - HTML代碼中的文字亂碼是怎么回事?10. javascript - ios返回不執(zhí)行js怎么解決?
