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-第几个
<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 循环主要是为了遍历对象而生，不适用于遍历数组
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.循环遍历数组
2.1 vue 在html里面循环遍历数组
<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遍历数组
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遍历数组
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
<li v-for="movie in movies"> {{movie}} </li>
* 如果v-for遍历数组中的数组值、索引值
语法格式：v-for=(item, index) in items
v-for中使用二个参数，即当前项和当前项的索引
<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遍历过程中，遍历数组中值,并显示
<ul>
<li v-for="(name,index) in names">{{index}}. {{name}}</li>
</ul>
//遍历过程中，遍历数组中值、索引值，并显示
</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
在遍历数组时可以在元素中绑定一个key，key=数组值
绑定key的作用 ：主要是为了高效的更新虚拟DOM。(vue内部；让性能高一点)
* 当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点，
则Diff算法默认执行起来是比较复杂的。(一个个重新替换)
* 但绑定key后，可以使用key来给每个节点做一个唯一标识
Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
<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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
