Vue用v-for给src属性赋值的方法


Posted in Javascript onMarch 03, 2018

我的代码结构如下面代码所示,无法执行,在img中的src属性中无法用mustache表示法

<div id="test">
  <div v-for="item in lists">
    <img src="{{item.img}}">
  </div>
</div>
new Vue({
  el: "#test",
  data: function () {
    return {
      lists: [
        { img : 'img1' },
        { img : 'img2' },
        { img : 'img3' },
        { img : 'img4' }        
      ]
    }
  },
})

后来我将html中的代码改成如下

<div id="test">
  <div v-for="item in lists">
    <img v-bind:src="item.img">
  </div>
</div>

使用v-bind标签后,就可以正常使用了

以上这篇Vue用v-for给src属性赋值的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
JavaScript面向对象之体会[总结]
Nov 13 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 Javascript
vue中v-for加载本地静态图片方法
Mar 03 #Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 #Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 #Javascript
vue.js select下拉框绑定和取值方法
Mar 03 #Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 #Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 #Javascript
JS表单传值和URL编码转换
Mar 03 #Javascript
You might like
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python 用for循环实现1~n求和的实例
2019/02/01 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
Etam德国:内衣精品店
2019/08/25 全球购物
计算机本科生自荐信
2013/10/15 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
城管综合整治方案
2014/05/01 职场文书
授权委托书(完整版)
2014/09/10 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python