vue中的循环遍历对象、数组和字符串 vue中的循环遍历对象、数组和

vue循环遍历对象、数组和字符串

1.循环遍历对象
2.循环遍历数组
3.循环遍历字符串

vue循环遍历,指令v-for

1.循环遍历
2.v-for遍历数组
3.v-for遍历对象
4.v-for使用中添加key

vue循环遍历对象、数组和字符串
1.循环遍历对象

1.1vue 在html里面循环遍历对象

v-for=" (val, key , i) in dimItemMap" :key="key"

val-每一项
key -key值
i-第几个

1.2 在js里面forin遍历对象

for…in 循环主要是为了遍历对象而生，不适用于遍历数组

let data = https://www.it610.com/article/[{ 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.循环遍历数组

2.1 vue 在html里面循环遍历数组

2.2 在js里面for遍历数组

let id = 1524466for (let i = 0; i < list.length; i++) {let a = list[i]; if (a.id === id) {return a.name; } }

2.3 在js里面forof遍历数组

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，不推荐对数组进行遍历

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() 函数遍历数组

①无任何返回，可改变原来数组中的内容
②循环次数：数组的长度
③不支持return，不需要return语句
如下案例：给每个对象中添加age属性

let forArr = [{name:'tom',sex:'man'},{name:'linda',sex:'woman'},]forArr.forEach((item,index) => {console.log("forEach循环==index==",index,item); item.age = 27})console.log("forArr==遍历后===",forArr)// forArr ---->[{name:'tom',sex:'man',age:27},{name:'linda',sex:'woman',age:27}]

3.循环遍历字符串

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循环遍历,指令v-for
1.循环遍历
vue的循环遍历用v-for，语法类似于js中的for循环
当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。
v-for使用格式：
格式为：v-for = item in items
(遍历items中的数据)

2.v-for遍历数组
用v-for指令基于一个数组来渲染一个列表。
v-for 指令使用item in items形式的语法，其中items是源数据数组，而item则是被迭代的数组元素。

* 如果v-for遍历数组中的数组值语法格式：v-for="movie in movies"依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie
{{movie}}
* 如果v-for遍历数组中的数组值、索引值语法格式：v-for=(item, index) in itemsv-for中使用二个参数，即当前项和当前项的索引
{{index}}. {{item}}

{{name}}
//v-for遍历过程中，遍历数组中值,并显示
{{index}}. {{name}}
//遍历过程中，遍历数组中值、索引值，并显示

3.v-for遍历对象

1.遍历对象属性用value值
2.遍历对象属性和属性值用value值和key
3.遍历对象属性和属性值和索引用value值、key和index

//展示出所有信息
{{info.name}}
{{info.age}}
{{info.height}}
//方法1.一个个写出来
{{item}}
//方法2.用v-for遍历对象的value值。(属性)
{{value}}--{{key}}
//方法3.用v-for遍历对象的value值和key，value在前面。(属性和属性值)
{{value}}--{{key}}--{{index}}
//方法4.用v-for遍历对象的value值、key和index。(属性和属性值和索引)

4.v-for使用中添加key
在遍历数组时可以在元素中绑定一个key，key=数组值
绑定key的作用：主要是为了高效的更新虚拟DOM。(vue内部；让性能高一点)