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 onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
js继承实现方法详解
Dec 16 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
JavaScript实现图片合成下载的示例
Nov 19 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连接mssql数据库的几种方法
2013/02/21 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
js字符串转成JSON
2013/11/07 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python匹配中文的正则表达式
2016/05/11 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
python随机生成库faker库api实例详解
2019/11/28 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
公务员政审个人总结
2015/02/12 职场文书
初中毕业生自我评价
2015/03/02 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
导游词之天津古文化街
2019/11/09 职场文书
mysql配置SSL证书登录的实现
2021/09/04 MySQL
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫