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 相关文章推荐
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
js只执行1次的函数示例
Jul 20 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
js格式化时间的简单实例
Nov 27 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
vue实现按需加载组件及异步组件功能
May 27 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
js实现页面图片消除效果
Mar 24 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
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
django 实现简单的插入视频
2020/04/07 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
客户代表自我评价范例
2013/09/24 职场文书
高一家长会邀请函
2014/01/12 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
小学运动会口号
2014/06/07 职场文书
2014年班级工作总结
2014/11/14 职场文书
2015年工程师工作总结
2015/04/30 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
Win11开始菜单添加休眠选项
2022/04/19 数码科技