這篇文章將為大家詳細講解有關Vue.js中怎么動態為img的src屬性賦值，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
需求是這樣：
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>關于Vue.js中怎么動態為img的src屬性賦值就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
