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