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 相关文章推荐
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 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通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
vue无限轮播插件代码实例
2019/05/10 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python实现pdf文档转txt的方法示例
2018/01/19 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
pycharm显示远程图片的实现
2019/11/04 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
params有什么用
2016/03/01 面试题
电子商务专业求职信
2014/07/10 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书