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 相关文章推荐
JS array 数组详解
Mar 22 Javascript
再论Javascript的类继承
Mar 05 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 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生成WAP页面
2006/10/09 PHP
56.com视频采集接口程序(PHP)
2007/09/22 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
php命令行模式代码实例详解
2021/02/26 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
提高 DHTML 页面性能
2006/12/25 Javascript
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
JS 事件绑定函数代码
2010/04/28 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
vue中如何使用ztree
2018/02/06 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
Python中replace方法实例分析
2014/08/20 Python
Python使用chardet判断字符编码
2015/05/09 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
python执行精确的小数计算方法
2019/01/21 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
办公室主任岗位职责
2013/11/08 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
质量保证书格式模板
2015/02/27 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
为Centos安装指定版本的Docker
2022/04/01 Servers