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 相关文章推荐
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
javascript实现完美拖拽效果
May 06 Javascript
图解JavaScript中的this关键字
May 28 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
php实现微信支付之现金红包
2018/05/30 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
js 获取服务器控件值的代码
2010/03/05 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
Python程序设计入门(4)模块和包
2014/06/16 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
python socket 聊天室实例代码详解
2019/11/14 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
开发房地产协议书
2014/09/14 职场文书
流动人口婚育证明
2014/10/19 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python