欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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ù)組進行遍歷
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?
// d

vue循環(huán)遍歷,指令v-for

1.循環(huán)遍歷

vue的循環(huán)遍歷用v-for，語法類似于js中的for循環(huán)

當(dāng)我們有一組數(shù)據(jù)需要進行渲染時，我們就可以使用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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。 

相關(guān)文章

最新評論