Vue.js 動態為img的src賦值
阿新 • • 發佈:2019-01-10
需求是這樣:
ajax獲取資料如下
{
"code": "200",
"data": {
"SumAmount": 200,
"List": [{
"amount": 100,
"sex": "male",
"fee": 1,
"id": 98,
"status": 2,
"time": "2015-08-11"
}, {
"amount": 100,
"sex" : "female",
"fee": 0,
"id": 8,
"status": 2,
"time": "2015-06-12"
}]
},
"msg": "success"
}
然後渲染列表到頁面,如果男,則將img的src設為"images/male.png",反之設為"images/female.png"
兩個都可以實現,為了在html中看起來舒服點還是用filter吧,雖然也就一個判斷邏輯,但是判斷語句加上url,這就不美觀了,當然,這只是個人習慣,直接用指令的話直觀點
<img v-attr="src: sex=='male'?'images/male.png':'images/female.png'">
<img v-attr="src: sex | isM">
對應的filter
filters: {
isM: function (val) {
return val == 'male' ? 'images/male.png' : 'images/female.pn'
}
}
方法很多,我寫我推薦的吧:
首先男女這樣的標示屬於裝飾性內容,我建議寫到css裡面。也就是說用背景圖的形式來控制現實男女
這樣你有兩個class .male
female
<span class={{sex}}></span>