微客导航 » 文章资讯 » Vue.js 动态为img的src赋值方法

Vue.js 动态为img的src赋值方法

2023-09-15 11:45:05 331

需求是这样：

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，这就不美观了，当然，这只是个人习惯，直接用指令的话直观点

对应的filter

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

方法很多，我写我推荐的吧：

首先男女这样的标示属于装饰性内容，我建议写到css里面。也就是说用背景图的形式来控制现实男女

这样你有两个class.malefemale

以上这篇Vue.js动态为img的src赋值方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Vue.js 动态为img的src赋值方法

热门推荐

随机推荐