Vue.js 动态为img的src赋值方法-js教程-PHP中文网

Vue.js 动态为img的src赋值方法

亚连

发布： 2018-05-30 15:18:09

原创

3845人浏览过

下面我就为大家分享一篇vue.js 动态为img的src赋值方法，具有很好的参考价值，希望对大家有所帮助。

需求是这样：

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'
   }
  }

登录后复制

方法很多，我写我推荐的吧：

《PHP程序设计》第二版

本书图文并茂，详细讲解了使用LAMP（PHP）脚本语言开发动态Web程序的方法，如架设WAMP平台，安装与配置开源Moodle平台，PHP程序设计技术，开发用户注册与验证模块，架设LAMP平台。　本书适合计算机及其相关专业本、专科学生作为学习LAMP（PHP）程序设计或动态Web编程的教材使用，也适合对动态Web编程感兴趣的读者自觉使用，对LAMP（PHP）程序设计人员也具有一定的参考价值。