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 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
JQuery 解析多维的Json数据格式
Nov 02 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 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模板技术[转]
2007/01/04 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
js实现DOM走马灯特效的方法
2015/01/21 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
python中的多重继承实例讲解
2014/09/28 Python
Python contextlib模块使用示例
2015/02/18 Python
Python中表示字符串的三种方法
2017/09/06 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
企业安全生产承诺书
2014/05/22 职场文书
幼儿园标语大全
2014/06/19 职场文书
真诚的求职信
2014/07/04 职场文书
尊师重教演讲稿
2014/09/04 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
2015年入党决心书
2015/02/05 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书