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 相关文章推荐
Jquery对数组的操作技巧整理
Mar 25 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
JavaScript原始值与包装对象的详细介绍
May 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实现权限管理功能示例
2017/09/22 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
js动态设置鼠标事件示例代码
2013/10/30 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
Python中的装饰器用法详解
2015/01/14 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
python对于requests的封装方法详解
2019/01/03 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
教育实习生的自我评价分享
2013/11/21 职场文书
计算机网络专业推荐信
2013/11/24 职场文书
酒店办公室文员岗位职责
2013/12/18 职场文书
业务总经理岗位职责
2014/02/03 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
儿童生日会策划方案
2014/05/15 职场文书
推广普通话演讲稿
2014/05/23 职场文书
招商银行工作证明
2015/06/17 职场文书
法人代表资格证明书
2015/06/18 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL