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 跳转代码集合
Dec 03 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
vue的keep-alive用法技巧
Aug 15 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
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
Python中异常重试的解决方案详解
2017/05/05 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
pandas中ix的使用详细讲解
2020/03/09 Python
关于Keras Dense层整理
2020/05/21 Python
浅析python 字典嵌套
2020/09/29 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
python简单实现插入排序实例代码
2020/12/16 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
abstract是什么意思
2012/02/12 面试题
自荐书4要点
2014/01/25 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
青奥会口号
2014/06/12 职场文书
就业证明函
2015/06/17 职场文书
初三化学教学反思
2016/02/22 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers