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 相关文章推荐
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
Vue-component全局注册实例
Sep 06 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
基于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中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
php银联网页支付实现方法
2015/03/04 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
封装好的省市地区联动控件附下载
2007/08/13 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
python从入门到精通(DAY 1)
2015/12/20 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
在python中使用nohup命令说明
2020/04/16 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
勤俭节约主题班会
2015/08/13 职场文书
python unittest单元测试的步骤分析
2021/08/02 Python