v-for循環(huán)遍歷圖片的方法

寫(xiě)項(xiàng)目時(shí)，遇到后臺(tái)無(wú)法提供背景圖片，需要自己在本地循環(huán)遍歷到頁(yè)面上，并和后臺(tái)數(shù)據(jù)一起展示的需求

解決方法如下

resourceList是后臺(tái)傳過(guò)來(lái)的數(shù)組對(duì)象，我們需要展示它的name，同時(shí)，在本地把圖片按以下方式命名：

使用:src動(dòng)態(tài)獲取圖片屬性，記住必須加require?。?！ 使用模板字符串方法，將圖片名和數(shù)字遍歷出來(lái)，得以解決。附上一張效果圖

vue循環(huán)顯示多個(gè)圖片

首先準(zhǔn)備圖片

代碼如下

// 第一種
<img :src="require(`./assets/image/${item.img}.png`)" width="100%" height="100px" alt="">
skinArr: [
 {name: 'default', theme: 'default', desc: '默認(rèn)皮膚', img: 'skin-default'},
  {name: 'dark', theme: 'dark', desc: '黑暗之神', img: 'skin-dark'},
  {name: 'blue', theme: 'blue', desc: '藍(lán)精靈', 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: '默認(rèn)皮膚', img: default },
  {name: 'dark', theme: 'dark', desc: '黑暗之神', img: dark },
  {name: 'blue', theme: 'blue', desc: '藍(lán)精靈', img: blue  },
],

效果

小擴(kuò)展（require 和 import）

首先這兩個(gè)都是為了JS模塊化編程使用.

遵循規(guī)范

• require 是 AMD規(guī)范引入方式
• import是es6的一個(gè)語(yǔ)法標(biāo)準(zhǔn)，如果要兼容瀏覽器的話必須轉(zhuǎn)化成es5的語(yǔ)法

調(diào)用時(shí)間

• require是運(yùn)行時(shí)調(diào)用，所以require理論上可以運(yùn)用在代碼的任何地方（雖然這么說(shuō)但是還是一般放開(kāi)頭）
• import是編譯時(shí)調(diào)用，所以必須放在文件開(kāi)頭

本質(zhì)

• require是賦值過(guò)程，其實(shí)require的結(jié)果就是對(duì)象、數(shù)字、字符串、函數(shù)等，再把require的結(jié)果賦值給某個(gè)變量
• import是解構(gòu)過(guò)程，但是目前所有的引擎都還沒(méi)有實(shí)現(xiàn)import，我們?cè)趎ode中使用babel支持ES6，也僅僅是將ES6轉(zhuǎn)碼為ES5再執(zhí)行，import語(yǔ)法會(huì)被轉(zhuǎn)碼為require
• import會(huì)被轉(zhuǎn)成require 那就說(shuō)明了啥？import 更高級(jí)嘛，以后的主力，require就是替補(bǔ)嘛

require / exports：

遵循 CommonJS/AMD，只能在運(yùn)行時(shí)確定模塊的依賴關(guān)系及輸入/輸出的變量，無(wú)法進(jìn)行靜態(tài)優(yōu)化。

用法只有以下三種簡(jiǎn)單的寫(xiě)法：

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

import / export：

遵循 ES6 規(guī)范，支持編譯時(shí)靜態(tài)分析，便于JS引入宏和類(lèi)型檢驗(yàn)。動(dòng)態(tài)綁定。

寫(xiě)法就比較多種多樣：

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'

我還是覺(jué)得import 字面上更好理解一點(diǎn)喜歡import

1、通過(guò)require引入基礎(chǔ)數(shù)據(jù)類(lèi)型時(shí)，屬于復(fù)制該變量。

2、通過(guò)require引入復(fù)雜數(shù)據(jù)類(lèi)型時(shí)，數(shù)據(jù)淺拷貝該對(duì)象。

3、出現(xiàn)模塊之間的循環(huán)引用時(shí)，會(huì)輸出已經(jīng)執(zhí)行的模塊，而未執(zhí)行的模塊不輸出（比較復(fù)雜）

4、CommonJS模塊默認(rèn)export的是一個(gè)對(duì)象，即使導(dǎo)出的是基礎(chǔ)數(shù)據(jù)類(lèi)型

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論