下面我就為大家分享一篇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賦值方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!