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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
jQuery is()函数用法3例
May 06 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
jquery自适应布局的简单实例
May 28 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
详解JavaScript中return的用法
May 08 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
vue计算属性及使用详解
Apr 02 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获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
php字符串截取函数用法分析
2014/11/25 PHP
PHP的引用详解
2015/02/22 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
asp 取文本框名称代码
2008/12/02 Javascript
jQuery 操作XML入门
2008/12/25 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
浅析JS运动
2015/12/28 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
Python的Django框架中if标签的相关使用
2015/07/15 Python
详解如何使用Python编写vim插件
2017/11/28 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
pandas针对excel处理的实现
2021/01/15 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
十佳教师事迹材料
2014/01/11 职场文书
实习鉴定评语
2014/01/19 职场文书
班风学风建设方案
2014/05/06 职场文书
先进个人评语大全
2015/01/04 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技