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 相关文章推荐
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 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
PHP date函数常用时间处理方法
2015/05/11 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
python开发游戏的前期准备
2019/05/05 Python
python自动下载图片的方法示例
2020/03/25 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
python 图像增强算法实现详解
2021/01/24 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
经典大学生求职信范文
2014/01/06 职场文书
排查整治工作方案
2014/06/09 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python