关于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 相关文章推荐
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
微信开发之企业付款到银行卡接口开发的示例代码
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 Undefined index报错的修复方法
2011/07/17 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
浏览器常用高宽的jquery插件
2011/02/24 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
js密码强度检测
2016/01/07 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
基于Python实现文件大小输出
2016/01/11 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
python实现扫雷小游戏
2020/04/24 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
机械个人求职信范文
2014/01/24 职场文书
小学校园活动策划
2014/01/30 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
公司保密承诺书
2014/03/27 职场文书
初中学校军训方案
2014/05/09 职场文书
汽车专业求职信
2014/06/05 职场文书
个人年终总结结尾
2015/03/06 职场文书
故意伤害罪辩护词
2015/05/21 职场文书