iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue中实现v-for循环遍历图片的方法
  • 184
分享到

Vue中实现v-for循环遍历图片的方法

2024-04-02 19:04:59 184人浏览 泡泡鱼
摘要

目录v-for循环遍历图片的方法解决方法如下Vue循环显示多个图片小扩展(require 和 import)v-for循环遍历图片的方法 写项目时,遇到后台无法提供背景图片,需要自己

v-for循环遍历图片的方法

项目时,遇到后台无法提供背景图片,需要自己在本地循环遍历到页面上,并和后台数据一起展示的需求

解决方法如下

resourceList是后台传过来的数组对象,我们需要展示它的name,同时,在本地把图片按以下方式命名:

使用:src动态获取图片属性,记住必须加require!!! 使用模板字符串方法,将图片名和数字遍历出来,得以解决。附上一张效果图

vue循环显示多个图片

首先准备图片

代码如下

// 第一种
<img :src="require(`./assets/image/${item.img}.png`)" width="100%" height="100px" alt="">
skinArr: [
 {name: 'default', theme: 'default', desc: '默认皮肤', img: 'skin-default'},
  {name: 'dark', theme: 'dark', desc: '黑暗之神', img: 'skin-dark'},
  {name: 'blue', theme: 'blue', desc: '蓝精灵', img: 'skin-blue'},
],
// 第二种
<img :src="img" alt="" width="100%" height="100px">
import default from  './assets/image/skin-default.png'; // import 引入图片
import dark from './assets/image/skin-dark.png'; // import 引入图片
import blue from './assets/image/skin-blue.png'; // import 引入图片
skinArr: [
 {name: 'default', theme: 'default', desc: '默认皮肤', img: default },
  {name: 'dark', theme: 'dark', desc: '黑暗之神', img: dark },
  {name: 'blue', theme: 'blue', desc: '蓝精灵', img: blue  },
],

效果

小扩展(require 和 import)

首先这两个都是为了js模块化编程使用.

遵循规范

  • require 是 AMD规范引入方式
  • import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法

调用时间

  • require是运行时调用,所以require理论上可以运用在代码的任何地方(虽然这么说但是还是一般放开头)
  • import是编译时调用,所以必须放在文件开头

本质

  • require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量
  • import是解构过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require
  • import会被转成require 那就说明了啥?import 更高级嘛,以后的主力,require就是替补嘛

require / exports:

遵循 CommonJS/AMD,只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化

用法只有以下三种简单的写法:

const fs = require('fs')
exports.fs = fs
module.exports = fs

import / export:

遵循 ES6 规范,支持编译时静态分析,便于JS引入宏和类型检验。动态绑定。

写法就比较多种多样:

import fs from 'fs'
import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'
export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'

我还是觉得import 字面上更好理解一点喜欢import

1、通过require引入基础数据类型时,属于复制该变量。

2、通过require引入复杂数据类型时,数据浅拷贝该对象。

3、出现模块之间的循环引用时,会输出已经执行的模块,而未执行的模块不输出(比较复杂)

4、CommonJS模块默认export的是一个对象,即使导出的是基础数据类型

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: Vue中实现v-for循环遍历图片的方法

本文链接: https://www.lsjlt.com/news/165739.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue中实现v-for循环遍历图片的方法
    目录v-for循环遍历图片的方法解决方法如下vue循环显示多个图片小扩展(require 和 import)v-for循环遍历图片的方法 写项目时,遇到后台无法提供背景图片,需要自己...
    99+
    2024-04-02
  • 在vue中v-for循环遍历图片不显示错误的解决方案
    目录v-for循环遍历图片不显示错误错误vue本地图片路径正确,但for循环不显示经过改正加个require()就可以显示了v-for循环遍历图片不显示错误 <template...
    99+
    2024-04-02
  • Mysql实现for循环遍历
    友情目录 1.具体需求2.代码实现3.文章参考 1.具体需求 num = 1 ids =(sourceSql: select id from table) for id in...
    99+
    2023-09-07
    mysql 数据库 sql
  • 使用vue v-for循环图片路径方式
    目录v-for循环图片路径v-for循环图片无法显示解决方法v-for循环图片路径 <template> <el-carousel :interval="40...
    99+
    2024-04-02
  • vue v-for遍历循环时key值报错怎么办
    小编给大家分享一下vue v-for遍历循环时key值报错怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一 、问题如下:[...
    99+
    2024-04-02
  • 怎么使用vue的v-for循环图片路径
    这篇“怎么使用vue的v-for循环图片路径”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么使用vue的v-for循环图片...
    99+
    2023-06-29
  • Go中如何使用for循环遍历切片
    在Go中,可以使用for range循环来遍历切片。下面是一个简单的示例: package main import "f...
    99+
    2024-04-02
  • python中实现循环遍历的方法有哪些
    本篇文章为大家展示了python中实现循环遍历的方法有哪些,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Python的优点有哪些1、简单易用,与C/C++、Java、C# 等传统语言相比,Pytho...
    99+
    2023-06-14
  • Java中Map循环遍历的五种方法实现
    目录1、创建一个Enum2、开始遍历方法一方法二方法三方法四方法五因为Map比较常用,所以今天来总结下Map取值比较常用的几种遍历方法。 1、创建一个Enum public enum...
    99+
    2024-04-02
  • Python实现for循环倒序遍历列表
    目录for倒序遍历列表for循环(正序/倒序)1.正序2.倒序for倒序遍历列表 数字列表,range方法构建列表: for value in range(5, -1, -1):  ...
    99+
    2024-04-02
  • [java] Map循环遍历的5种方法实现
    [java] Map循环遍历的5种方法实现 文章目录 一、方法一(推荐)二、方法二(推荐)三、方法三四、方法四五、方法五总结 一、方法一(推荐) 推荐使用此方法效率比较高 Map...
    99+
    2023-10-09
    java
  • PHP循环中如何使用for()方法遍历数组
    这篇文章主要介绍了PHP循环中如何使用for()方法遍历数组,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。for():使用for语句循环遍历...
    99+
    2024-04-02
  • 如何解决vue的v-for循环中图片加载路径问题
    这篇文章将为大家详细讲解有关如何解决vue的v-for循环中图片加载路径问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。先看一下产品需求,如下图所示,产品要求图片和它的...
    99+
    2024-04-02
  • 利用For循环遍历Python字典的三种方法实例
    目录前言方法 1:使用 For 循环 + 索引进行迭代方法 2:使用 .keys( ) + 索引进行迭代方法 3:使用 .items( ) 进行迭代进阶:遍历嵌套字典总结前言 在Py...
    99+
    2024-04-02
  • vue中v-for循环对象中的属性
    目录1、循环对象内的值2、循环对像3、循环键和值1、循环对象内的值 <body> <div id="app"> <!...
    99+
    2024-04-02
  • 使用For循环遍历Python字典的方法有哪些
    本篇内容介绍了“使用For循环遍历Python字典的方法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在Python中,如何使用“fo...
    99+
    2023-06-30
  • 编写Vue v-for循环的方式有哪些
    这篇文章主要讲解了“编写Vue v-for循环的方式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“编写Vue v-for循环的方式有哪些”吧!这在碰到诸如以下情况时...
    99+
    2023-06-22
  • Java中Map循环遍历的方法有哪些
    这篇文章主要介绍“Java中Map循环遍历的方法有哪些”,在日常操作中,相信很多人在Java中Map循环遍历的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Java中Map循环遍历的方法有哪些”的疑...
    99+
    2023-07-02
  • js中的循环方式及各种遍历的方法
    目录for循环while循环  do-while循环 循环的嵌套遍历方法for - infor - offor循环   1、for有三个表达式:①声明循环变量;②判断循环条件;③更新...
    99+
    2024-04-02
  • vue中v-for循环对象的示例分析
    这篇文章将为大家详细讲解有关vue中v-for循环对象的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1、循环对象内的值<body>    &l...
    99+
    2023-06-25
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作