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文件 document.createElement
Oct 14 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 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提示Notice: Undefined variable的解决办法
2012/11/24 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
用Python配平化学方程式的方法
2019/07/20 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
python 代码运行时间获取方式详解
2020/09/18 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
html5新特性与用法大全
2018/09/13 HTML / CSS
岗位职责的含义
2013/11/17 职场文书
水毁工程实施方案
2014/04/01 职场文书
区级文明单位申报材料
2014/05/15 职场文书
学校三节实施方案
2014/06/09 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
html中两种获取标签内的值的方法
2022/06/16 jQuery