vue2.0 循环遍历加载不同图片的方法


Posted in Javascript onMarch 06, 2018

demo:

<div v-for="item in temps" :key="item.id">
     <div class="contract-item">
       <img :src="item.imgUrl">
     </div>
    </div>

引入图片,注意路径:

import con1 from "@/assets/img/con01.png";
import con2 from "@/assets/img/con02.png";
import con3 from "@/assets/img/con03.png";

进行图片的加载位置:

temps: [
    {
     imgUrl: con1
    },
    {
     imgUrl: con2
    },
    {
     imgUrl: con3
    },
   ],

这样就实现了循环遍历的时候加载不同的图片。

以上这篇vue2.0 循环遍历加载不同图片的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
使用Vue生成动态表单
Nov 26 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
js实现缓动动画
Nov 25 Javascript
node的process以及child_process模块学习笔记
Mar 06 #Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 #Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 #jQuery
Vue2.0 http请求以及loading展示实例
Mar 06 #Javascript
浅析Vue中method与computed的区别
Mar 06 #Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 #Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 #Javascript
You might like
PHP中cookie和session的区别实例分析
2014/08/28 PHP
js 处理URL实用技巧
2010/11/23 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
python进阶教程之动态类型详解
2014/08/30 Python
Python读大数据txt
2016/03/28 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
详解python metaclass(元类)
2020/08/13 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
模具设计与制造专业应届生求职信
2013/10/18 职场文书
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
消防安全宣传标语
2014/06/07 职场文书
银行求职自荐信
2014/06/30 职场文书
2014年营业员工作总结
2014/11/18 职场文书
入党介绍人意见范文
2015/06/01 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python