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 必知必会之closure
Sep 21 Javascript
jquery操作select option 的代码小结
Jun 21 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
js制作简易年历完整实例
Jan 28 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
js布局实现单选按钮控件
Jan 17 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
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
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
python数据类型强制转换实例详解
2020/06/22 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
志愿者爱心公益活动策划方案
2014/09/15 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
财务人员个人工作总结
2015/02/27 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
2019销售早会主持词
2019/06/27 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
教你怎么用Python生成九宫格照片
2021/05/20 Python
Redis如何实现分布式锁
2021/08/23 Redis