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"react router 方法
}
然后渲染列表到页⾯，如果男，则将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赋值⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。