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


Posted in Javascript onMarch 14, 2018

需求是这样:

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赋值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 操作符实例代码
Oct 24 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
js微信分享API
Oct 11 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 #Javascript
vue 过滤器filter实例详解
Mar 14 #Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 #Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 #Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 #Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 #Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 #Javascript
You might like
php中函数的形参与实参的问题说明
2010/09/01 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
php 生成短网址原理及代码
2014/01/23 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
Vue Socket.io源码解读
2018/02/07 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
python实现socket客户端和服务端简单示例
2014/02/24 Python
Python 多线程实例详解
2017/03/25 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
Python  Django 母版和继承解析
2019/08/09 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
详解如何修改python中字典的键和值
2020/09/29 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
幼儿园教师岗位职责
2014/03/17 职场文书
计划生育标语
2014/06/23 职场文书
交通违章检讨书
2014/09/21 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS