Vue.js 动态为img的src赋值
来源:互联网 发布:mac图片预览软件 编辑:程序博客网 时间:2024/05/21 04:24
需求是这样:
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">对应的filterfilters: { isM: function (val) { return val == 'male' ? 'images/male.png' : 'images/female.pn' } }
方法很多,我写我推荐的吧:
首先男女这样的标示属于装饰性内容,我建议写到css里面。也就是说用背景图的形式来控制现实男女
这样你有两个class .male
female
<span class={{sex}}></span>
阅读全文
0 0
- Vue.js 动态为img的src赋值
- js给<img>的src赋值
- Vue为<img />绑定动态url
- 动态的设置<img>的src地址
- js获取img路径src的值
- js 正则匹配 扣 img 的src
- 用js动态的改变img标签里面的src属性实现图片的循环切换
- 用jQuery改变img的src的路径 重新赋值
- IE6,IE7 关于js动态调整img src属性,无法正确发出异步请求的问题
- Vue中img的src属性绑定与static文件夹
- vue 动态加载图片src的解决办法
- <img src=""> img标签的src为空的缺陷
- 动态给src赋值
- 动态转换img.src需要注意的问题
- img动态改变src的参数,图片不及时更新
- js获取img路径src
- Vue.js 图片不显示 | 图片资引用 | img src 路径出错
- Vue.js 2.0 有时双向绑定img src属性失败问题
- 从零编写日志分析系统之需求分析
- ECMA6
- C++ const
- SQL入门经典(第5版)第一章 欢迎来到SQL世界
- Nginx简介及配置文件详解
- Vue.js 动态为img的src赋值
- mavan多平台打包
- eclipse 项目中 An internal error occurred during: "Building workspace". Java heap space
- 内核3.x版本之后设备树机制
- UNIX环境编程学习笔记(14)——文件I/O之临时文件
- weblogic java.lang.OutOfMemoryError: PermGen space 问题解决方法
- Java IO流工具类
- 关于Javascript回调函数的那些事
- 20个经典MySQL面试题,全部答对月薪10k+(感觉有点难)