這篇文章將為大家詳細(xì)講解有關(guān)Vue.js中怎么動(dòng)態(tài)為img的src屬性賦值，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)建站始終堅(jiān)持【策劃先行，效果至上】的經(jīng)營(yíng)理念，通過(guò)多達(dá)10年累計(jì)超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的營(yíng)銷推廣解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶，其中包括：門窗定制等企業(yè)，備受客戶贊譽(yù)。

需求是這樣：

ajax獲取數(shù)據(jù)如下

{
 "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"
}

然后渲染列表到頁(yè)面，如果男，則將img的src設(shè)為"images/male.png",反之設(shè)為"images/female.png"

兩個(gè)都可以實(shí)現(xiàn)，為了在html中看起來(lái)舒服點(diǎn)還是用filter吧，雖然也就一個(gè)判斷邏輯，但是判斷語(yǔ)句加上url，這就不美觀了，當(dāng)然，這只是個(gè)人習(xí)慣，直接用指令的話直觀點(diǎn)

對(duì)應(yīng)的filter

filters: {
   isM: function (val) {
     return val == 'male' ? 'images/male.png' : 'images/female.pn'
   }
  }

方法很多，我寫(xiě)我推薦的吧：

首先男女這樣的標(biāo)示屬于裝飾性內(nèi)容，我建議寫(xiě)到css里面。也就是說(shuō)用背景圖的形式來(lái)控制現(xiàn)實(shí)男女

這樣你有兩個(gè)class .male female

關(guān)于Vue.js中怎么動(dòng)態(tài)為img的src屬性賦值就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。