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实现单继承和多继承的简单方法
Mar 29 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
layUI实现列表查询功能
Jul 27 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
Python之os操作方法(详解)
2017/06/15 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
python实现银行实战系统
2020/02/26 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
受欢迎的大学生自我评价
2013/12/05 职场文书
任命书范本大全
2014/06/06 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
MySQL为id选择合适的数据类型
2021/06/07 MySQL
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android