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 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
jquery实用代码片段集合
Aug 12 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
微信小程序关键字变色实现代码实例
Dec 13 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
探讨方法的重写(覆载)详解
2013/06/08 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
python client使用http post 到server端的代码
2013/02/10 Python
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
python爬取哈尔滨天气信息
2018/07/14 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
django实现类似触发器的功能
2019/11/15 Python
python标准库OS模块详解
2020/03/10 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
好的演讲稿开场白
2013/12/30 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
秘书英文求职信范文
2014/01/31 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
我的祖国演讲稿
2014/05/04 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android