Vue.js 动态为img的src赋值方法
更新时间：2018年03月14日 08:41:10 作者：DotNet灵魂
下面小编就为大家分享一篇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赋值方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在 Typescript 中使用可被复用的 Vue Mixin功能
这篇文章主要介绍了在 Typescript 中使用可被复用的 Vue Mixin功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-04-04
源码揭秘为什么 Vue2 this 能够直接获取到 data 和 methods
本篇文章主要介绍的是Vue2 this 能够直接获取到 data 和 methods，阅读本文将能学到如何学习调试 vue2 源码、data 中的数据为什么可以用 this 直接获取到、methods 中的方法为什么可以用 this 直接获取到,需要的朋友可以参考一下2021-09-09
这篇文章主要介绍了Vue Router的懒加载路径的解决方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
今天小编就为大家分享一篇VUE 解决mode为history页面为空白的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue基于websocket实现智能聊天及吸附动画效果,主要功能是基于websocket实现聊天功能，封装了一个socket.js文件，使用Jwchat插件实现类似QQ、微信电脑端的功能，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vue关于锚点定位、跳转到指定位置实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了vue项目中jsonp跨域获取qq音乐首页推荐问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了Vue 按键修饰符的相关资料，vue中新增按键修饰符和系统修饰符来处理类似的事件，具体内容详情大家参考下本文2018-05-05
这篇文章主要介绍了vue返回上一页(后退)的几种方法与区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue中node_modules中第三方模块的修改使用,本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
最新评论