首頁 > web前端 > js教程 > Vue.js 動態為img的src賦值方法

Vue.js 動態為img的src賦值方法

亚连
發布: 2018-05-30 15:18:09
原創
3705 人瀏覽過

下面我就為大家分享一篇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==&#39;male&#39;?&#39;images/male.png&#39;:&#39;images/female.png&#39;">
<img v-attr="src: sex | isM">
登入後複製

對應的filter

#

filters: {
   isM: function (val) {
     return val == &#39;male&#39; ? &#39;images/male.png&#39; : &#39;images/female.pn&#39;
   }
  }
登入後複製

方法很多,我寫我推薦的吧:

首先男女這樣的標示屬於裝飾性內容,我建議寫到css裡面。也就是說用背景圖的形式來控制現實男女

這樣你有兩個class .male female

<span class={{sex}}></span>
登入後複製

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

在vue元件中使用axios的方法

axios post提交formdata的實例

vue-router相關基礎與運作原則

#

以上是Vue.js 動態為img的src賦值方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板