vue中的循環(huán)遍歷對(duì)象、數(shù)組和字符串
vue循環(huán)遍歷對(duì)象、數(shù)組和字符串
1.循環(huán)遍歷對(duì)象
- 1.1vue 在html里面循環(huán)遍歷對(duì)象
v-for=" (val, key , i) in dimItemMap" :key="key"
- val-每一項(xiàng)
- key -key值
- i-第幾個(gè)
<el-table-column prop="score" label="評(píng)分" :show-overflow-tooltip="true" align="center">
? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? <span>
? ? ? ? ? ? ? ? <span v-for=" (val, key , i) in scope.row.dimItemMap" :key="key">
? ? ? ? ? ? ? ? ? {{val.score}}//score為鍵,val.score為值
? ? ? ? ? ? ? ? </span>
? ? ? ? ? ?</span>
? ? ? ?</template>
</el-table-column>- 1.2 在js里面forin遍歷對(duì)象
for…in 循環(huán)主要是為了遍歷對(duì)象而生,不適用于遍歷數(shù)組
let data = [{ wiun2dvi: 232, wiun3dvi: 55, wiu4ndvi: 33, wiun1dvi: 24432 }];
? ? data.forEach((item,index)=>{
? ? ? for (const key in item) {
? ? ? ? console.log("item[key]",item[key]);//值
? ? ? ? console.log("key",key);//鍵
? ? ? }
? ? })2.循環(huán)遍歷數(shù)組
- 2.1 vue 在html里面循環(huán)遍歷數(shù)組
<el-table-column v-for="item in tableCol" :key="item.id" :prop="item.id" :label="item.name" :show-overflow-tooltip="true" align="center">
? ? ? <template slot-scope="scope">
? ? ? ? ? ?<span>{{scope.row.dimItemMap?scope.row.dimItemMap[item.id].name:""}}</span>
? ? ? </template>
</el-table-column><el-table-column prop="score" label="評(píng)分" :show-overflow-tooltip="true" align="center">
? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? <span>
? ? ? ? ? ? ? ? <span v-for=" (item, index) in scope.row.dimItemMap" :key="index">
? ? ? ? ? ? ? ? ? {{item.score}}
? ? ? ? ? ? ? ? </span>
? ? ? ? ? ?</span>
? ? ? ?</template>
</el-table-column>- 2.2 在js里面for遍歷數(shù)組
let id = 1524466
for (let i = 0; i < list.length; i++) {
? ? ? ? let a = list[i];
? ? ? ? if (a.id === id) {
? ? ? ? ? return a.name;
? ? ? ? }?
}- 2.3 在js里面forof遍歷數(shù)組
? ? ? ? ? ?let arr = [{
? ? ? ? ? ? ? ? name: 12,
? ? ? ? ? ? ? ? hello: "wsdfnioq",
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? name: 12,
? ? ? ? ? ? ? ? hello: "wsdfnioq",
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? name: 12,
? ? ? ? ? ? ? ? hello: "wsdfnioq",
? ? ? ? ? ? }]
? ? ? ? ? ? for (const i of arr) {
? ? ? ? ? ? ? ? console.log("i", i);
? ? ? ? ? ? }
//i {name: 12, hello: 'wsdfnioq'}
// i {name: 12, hello: 'wsdfnioq'}
?//i {name: 12, hello: 'wsdfnioq'}let arr = [
? ? ['name', "張三"],
? ? ['地址', '北京'],
? ? ['手機(jī)', '123']
]
for (const [value0, value1] of arr) {
? ? console.log('k', value0, value1);
}
// k name 張三
// k 地址 北京
// k 手機(jī) 123- 2.4 forin,不推薦對(duì)數(shù)組進(jìn)行遍歷
let arr = ["lsadnkol", "klsmvaod", "lpsaojfoas"]
for (const key in arr) {
? ? console.log("arr", key, typeof key, arr[key]);
}
// 0 string lsadnkol
// 1 string klsmvaod
// 2 string lpsaojfoas- 2.5 forEach() 函數(shù)遍歷數(shù)組
①無(wú)任何返回,可改變?cè)瓉?lái)數(shù)組中的內(nèi)容
②循環(huán)次數(shù):數(shù)組的長(zhǎng)度
③不支持return,不需要return語(yǔ)句
如下案例:給每個(gè)對(duì)象中添加age屬性
? ? let forArr = [{name:'tom',sex:'man'},{name:'linda',sex:'woman'},]
? ? ?forArr.forEach((item,index) => {
? ? ? ? console.log("forEach循環(huán)==index==",index,item);
? ? ? ? ?item.age = 27
? ? })
? ? console.log("forArr==遍歷后===",forArr)
? ?// forArr ---->[{name:'tom',sex:'man',age:27},{name:'linda',sex:'woman',age:27}]3.循環(huán)遍歷字符串
- 3.1for
let s = "abcd"
for (let i = 0; i < s.length; i++) {
? ? ? console.log(i, typeof i, s[i]); //i為索引,s[i]為值,typeof i 為number
}
// ?0 number a
// ?1 number b
// ?2 number c
// ?3 number d- 3.2 forin
let s = "abcd"
for (const key in s) {
? ? console.log("key", key, typeof key, s[key]); //key為索引,s[key]為值,typeof key 為string
}
// 0 string a
// 1 string b
// 2 string c
// 3 string d- 3.3 forof
let s = "abcd"
for (const i of s) {
? ? console.log("i", i);//i為值
}
// a?
// b?
// c?
// dvue循環(huán)遍歷,指令v-for
1.循環(huán)遍歷
vue的循環(huán)遍歷用v-for,語(yǔ)法類(lèi)似于js中的for循環(huán)
當(dāng)我們有一組數(shù)據(jù)需要進(jìn)行渲染時(shí),我們就可以使用v-for來(lái)完成。
v-for使用格式:
格式為:v-for = item in items
(遍歷items中的數(shù)據(jù))
2.v-for遍歷數(shù)組
用v-for指令基于一個(gè)數(shù)組來(lái)渲染一個(gè)列表。
v-for 指令使用item in items形式的語(yǔ)法,其中items是源數(shù)據(jù)數(shù)組, 而item則是被迭代的數(shù)組元素。
* 如果v-for遍歷數(shù)組中的數(shù)組值
? ?語(yǔ)法格式:v-for="movie in movies"
? ?依次從movies中取出movie,并且在元素的內(nèi)容中,我們可以使用Mustache語(yǔ)法,來(lái)使用movie
? ? ?<li v-for="movie in movies"> {{movie}} </li>
* 如果v-for遍歷數(shù)組中的數(shù)組值、索引值
? ? ?語(yǔ)法格式:v-for=(item, index) in items
? ? ? v-for中使用二個(gè)參數(shù),即當(dāng)前項(xiàng)和當(dāng)前項(xiàng)的索引
? ? ? <li v-for="(item, index) in items">{{index}}. {{item}}</li><div id="app">
? <ul>
? ? <li v-for="name in names">{{name}}</li>
? </ul>
? ?//v-for遍歷過(guò)程中,遍歷數(shù)組中值,并顯示
? <ul>
? ? <li v-for="(name,index) in names">{{index}}. {{name}}</li>
? </ul>
? ?//遍歷過(guò)程中,遍歷數(shù)組中值、索引值,并顯示
</div><script>
? const app = new Vue({
? ? el:"#app",
? ? data:{
? ? ? names:["劉富楠","科比","詹姆斯","庫(kù)里"]
? ? }
? })
</script>3.v-for遍歷對(duì)象
- 1.遍歷對(duì)象屬性 用value值
- 2.遍歷對(duì)象屬性和屬性值 用value值和key
- 3.遍歷對(duì)象屬性和屬性值和索引 用value值、key和index
<div id="app">
//展示出所有信息
? <ul>
? ? <li >{{info.name}}</li>
? ? <li >{{info.age}}</li>
? ? <li >{{info.height}}</li>
? </ul>
? //方法1.一個(gè)個(gè)寫(xiě)出來(lái)
? <ul>
? ? <li v-for="item in info">{{item}}</li>
? </ul>
? //方法2.用v-for遍歷對(duì)象的value值。(屬性)
? <ul>
? ? <li v-for="(value,key) in info">{{value}}--{{key}}</li>
? </ul>
? //方法3.用v-for遍歷對(duì)象的value值和key,value在前面。(屬性和屬性值)
? <ul>
? ? <li v-for="(value,key,index) in info">{{value}}--{{key}}--{{index}}</li>
? </ul>
? //方法4.用v-for遍歷對(duì)象的value值、key和index。(屬性和屬性值和索引)
</div><script>
? const app = new Vue({
? ? el:"#app",
? ? data:{
? ? ?info:{
? ? ? ? name:"lfn",
? ? ? ? age :18,
? ? ? ? height:180
? ? ? }
? ? ?}
? })
</script> ? ?4.v-for使用中添加key
在遍歷數(shù)組時(shí)可以在元素中綁定一個(gè)key,key=數(shù)組值
綁定key的作用 :主要是為了高效的更新虛擬DOM。(vue內(nèi)部;讓性能高一點(diǎn))
* 當(dāng)某一層有很多相同的節(jié)點(diǎn)時(shí),也就是列表節(jié)點(diǎn)時(shí),我們希望插入一個(gè)新的節(jié)點(diǎn),
則Diff算法默認(rèn)執(zhí)行起來(lái)是比較復(fù)雜的。(一個(gè)個(gè)重新替換)
* 但綁定key后,可以使用key來(lái)給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)
Diff算法就可以正確的識(shí)別此節(jié)點(diǎn),找到正確的位置區(qū)插入新的節(jié)點(diǎn)。
<div id="app">
? <ul>
? ? <li v-for="item in letters" :key="item">{{item}}</li>
? </ul>
</div><script>
? const app = new Vue({
? ? el:"#app",
? ? data:{
? ? ? letters:["A","B","C","D","E"]
? ? }
? })
</script>以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue-router使用next()跳轉(zhuǎn)到指定路徑時(shí)會(huì)無(wú)限循環(huán)問(wèn)題
- vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式
- vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄
- vue?循環(huán)動(dòng)態(tài)設(shè)置ref并獲取$refs方式
- vue如何在for循環(huán)中設(shè)置ref并獲取$refs
- vue中v-model如何綁定多循環(huán)表達(dá)式實(shí)戰(zhàn)案例
- Vue中實(shí)現(xiàn)v-for循環(huán)遍歷圖片的方法
- vue實(shí)現(xiàn)列表無(wú)縫循環(huán)滾動(dòng)
- vue中forEach循環(huán)的使用講解
- Vue3基礎(chǔ)篇之常用的循環(huán)示例詳解
相關(guān)文章
vant框架van-cell插槽無(wú)法換行問(wèn)題及解決
這篇文章主要介紹了vant框架van-cell插槽無(wú)法換行問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01
element表單使用校驗(yàn)之校驗(yàn)失效問(wèn)題詳解
最近工作中遇到了element表單校驗(yàn)失敗的情況,通過(guò)查找相關(guān)資料終于解決了,所以下面這篇文章主要給大家介紹了關(guān)于element表單使用校驗(yàn)之校驗(yàn)失效問(wèn)題的相關(guān)資料,需要的朋友可以參考下2022-10-10
vue?LogicFlow更多配置選項(xiàng)示例詳解
這篇文章主要為大家介紹了vue?LogicFlow更多配置選項(xiàng)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01
在vue中嵌入外部網(wǎng)站的實(shí)現(xiàn)
這篇文章主要介紹了在vue中嵌入外部網(wǎng)站的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue3動(dòng)態(tài)路由(響應(yīng)式帶參數(shù)的路由)變更頁(yè)面不刷新的問(wèn)題解決辦法
問(wèn)題來(lái)源是因?yàn)槲业拈_(kāi)源項(xiàng)目Maple-Boot項(xiàng)目的網(wǎng)站前端,因?yàn)轫?xiàng)目主打的內(nèi)容發(fā)布展示,所以其中的內(nèi)容列表頁(yè)會(huì)根據(jù)不同的菜單進(jìn)行渲染不同的路由,本文降介紹Vue3動(dòng)態(tài)路由變更頁(yè)面不刷新的問(wèn)題解決辦法,需要的朋友可以參考下2024-07-07
微前端qiankun主應(yīng)用與子應(yīng)用之間的跳轉(zhuǎn)示例
這篇文章主要為大家介紹了微前端qiankun主應(yīng)用與子應(yīng)用之間的跳轉(zhuǎn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
ubuntu中利用nginx部署vue項(xiàng)目的完整步驟
Nginx是一款輕量級(jí)的Web服務(wù)器/反向代理服務(wù)器及電子郵件(IMAP/POP3)代理服務(wù)器,在BSD-like 協(xié)議下發(fā)行,下面這篇文章主要給大家介紹了關(guān)于ubuntu中利用nginx部署vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-02-02
Vue實(shí)現(xiàn)計(jì)數(shù)器案例
這篇文章主要為大家詳細(xì)介紹了Vue計(jì)數(shù)器案例的實(shí)現(xiàn)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06

