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 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
javascript常用代码段搜集
Dec 04 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
Node.js API详解之 os模块用法实例分析
May 06 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
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
js验证表单第二部分
2006/11/25 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
python日志记录模块实例及改进
2017/02/12 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
python中的常量和变量代码详解
2018/07/25 Python
python函数的万能参数传参详解
2019/07/26 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
Python对excel的基本操作方法
2021/02/18 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
咖啡店自主创业商业计划书
2014/01/22 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
表扬稿格式范文
2015/01/16 职场文书
2015新学期开学寄语
2015/02/26 职场文书
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers