关于vue v-for循环解决img标签的src动态绑定问题


Posted in Javascript onSeptember 18, 2018

在解决这个问题上,遇到了很多错误的方案,一直没有跑通,有些是图片标记出现了,但是图片内容没有出现,这就很让人头疼了,下面,我讲解我操作成功的案例吧。

1、目录结构如下

关于vue v-for循环解决img标签的src动态绑定问题

图片放置在与src同级的static文件夹下,在这里,我放置在slider中

2、数据配置如下:

注意引入的路径,直接从static文件中对应的地方引入。

data () {
 return {
  product:[
  {
  "src":'../../static/slider/logo1.jpg',
  "deceration":"产品1",
  "price":100,
  "id":1
  },
  {
  "src":"../../static/slider/logo.png",
  "deceration":"产品2",
  "price":150,
  "id":2
  },
  {
  "src":"../../static/slider/logo.png",
  "deceration":"产品3",
  "price":180,
  "id":3
  }
  ]
 }
 }

3、img标签动态绑定src

<ul v-for="i in product" class="clear">
<li>
<img :src="i.src"/>
</li>
<li>
  <button>立即购买</button>
</li>
  <br />

</ul>

注意:此处的绑定,数据不要写成 :src="{{i.src}}"之类的。这是错误的!!!!

总结:

主要是图片位置的问题,图片存放在什么位置,能够让img通过src动态的绑定对应的值;

其次是图片配置路径的问题,若图片就和响应的vue在同一个文件,直接通过 ./logo.png 是只能写死的情况下显示,而动态的:src绑定是无法完成这种情况的显示。

以上这篇关于vue v-for循环解决img标签的src动态绑定问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
实现JavaScript中继承的三种方式
Oct 16 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
js清空form表单中的内容示例
May 20 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
php基于redis处理session的方法
Mar 14 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
JS删除对象中某一属性案例详解
Sep 08 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 #Javascript
vue自定义tap指令及tap事件的实现
Sep 18 #Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 #Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 #Javascript
记React connect的几种写法(小结)
Sep 18 #Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 #Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 #Javascript
You might like
php error_log 函数的使用
2009/04/13 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
vue写一个组件
2018/04/09 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
python实现socket客户端和服务端简单示例
2014/02/24 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
python list元素为tuple时的排序方法
2018/04/18 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
为什么是 Python -m
2020/06/19 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
还款承诺书范本
2015/01/20 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
Python OpenCV实现图像模板匹配详解
2022/04/07 Python