温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue.js中怎么动态为img的src属性赋值

发布时间:2021-07-09 14:57:08 来源:亿速云 阅读:322 作者:Leah 栏目:web开发

这篇文章将为大家详细讲解有关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属性赋值就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI