Vue.js 動態(tài)為img的src賦值方法
更新時間：2018年03月14日 08:41:10 作者：DotNet靈魂
下面小編就為大家分享一篇Vue.js 動態(tài)為img的src賦值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
需求是這樣：
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"
}
然后渲染列表到頁面，如果男，則將img的src設為"images/male.png",反之設為"images/female.png"
兩個都可以實現(xiàn)，為了在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'
}
}
方法很多，我寫我推薦的吧：
首先男女這樣的標示屬于裝飾性內(nèi)容，我建議寫到css里面。也就是說用背景圖的形式來控制現(xiàn)實男女
這樣你有兩個class .male female
<span class={{sex}}></span>
以上這篇Vue.js 動態(tài)為img的src賦值方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
在我們使用Vue開發(fā)時,經(jīng)常會用到CSS,下面這篇文章主要給大家介紹了關于Css中該如何使用Vue變量的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
vue 修改 data 數(shù)據(jù)問題并實時顯示操作
這篇文章主要介紹了vue 修改 data 數(shù)據(jù)問題并實時顯示操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了VueJs打包之后遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue+iview的菜單與頁簽的聯(lián)動方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
解決vue數(shù)據(jù)不實時更新的問題(數(shù)據(jù)更改了,但數(shù)據(jù)不實時更新)
這篇文章主要介紹了解決vue數(shù)據(jù)不實時更新的問題(數(shù)據(jù)更改了,但數(shù)據(jù)不實時更新)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue 路由間跳轉(zhuǎn)和新開窗口的方式（query、params）
這篇文章主要介紹了Vue 路由間跳轉(zhuǎn)和新開窗口的方式，本文主要通過query方式和params方式介紹,需要的朋友可以參考下2019-12-12
這篇文章主要為大家介紹了Vue中request.js封裝及調(diào)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要為大家詳細介紹了Vue2中多種常用全局自定義指令的封裝,包括一鍵復制,一鍵長按,圖片懶加載等功能,感興趣的小伙伴可以了解下2025-02-02
vue路由傳參之使用query傳參頁面刷新數(shù)據(jù)丟失問題解析
這篇文章主要介紹了vue路由傳參使用query傳參頁面刷新數(shù)據(jù)丟失問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
在Vue3架構(gòu)里,v-slot 作為作用域插槽的關鍵支撐,重塑了父子組件間數(shù)據(jù)與方法傳遞的范式,本文主要來和大家剖析一下v-slot的相關特性,需要的可以了解下2025-01-01