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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
深入理解 ES6中的 Reflect用法
Jul 18 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 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实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
详谈PHP编码转换问题
2015/07/28 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
jQuery实现增删改查
2020/12/22 jQuery
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
python pip如何手动安装二进制包
2020/09/30 Python
如何利用Python写个坦克大战
2020/11/18 Python
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
小学生暑假感言
2014/02/06 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
信用卡催款律师函
2015/05/27 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
教师节领导致辞
2015/07/29 职场文书
高三语文教学反思
2016/02/16 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python