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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
javascript中的几个运算符
Jun 29 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
深入探讨JavaScript String对象
Mar 09 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
js实现滑动进度条效果
Aug 21 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
element tree树形组件回显数据问题解决
Aug 14 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
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
img的onload的另类用法
2008/01/10 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
Python实现获取网站PR及百度权重
2015/01/21 Python
python字符串连接方法分析
2016/04/12 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
python绘制简单彩虹图
2018/11/19 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python爬虫基础知识点整理
2020/06/02 Python
澳大利亚百货公司:David Jones
2018/02/08 全球购物
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
档案保密承诺书
2014/06/03 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
学生检讨书范文
2019/06/24 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
Python 如何解决稀疏矩阵运算
2021/05/26 Python