目录
定义vue数据❤
data: {
//数组
arr2: [{
title: '星期一'
}, {
title: '星期二'
}, {
title: '星期三'
}],
//对象
area: {
"A": ["安阳", "安徽"],
"B": ["北京", "保定"],
"C": ["长安", "长沙"]
},
},
vue循环数组❤❤❤❤
v-for循环数组的时候有两个参数 第一个是数组项(表示数组中的每一项) 第二个是索引值 也叫下标
// v-for循环数组的时候有两个参数 第一个是数组项(表示数组中的每一项) 第二个是索引值 也叫下标
<div v-for="(item, index) in arr2">{{item}} ---- {{index}}</div>
vue循环对象❤❤❤❤
v-for循环对象的时候有三个参数 第一个是键值对的值(value) 第二个是键值对的键(key)第三个是下标
// v-for循环对象的时候有三个参数 第一个是键值对的值(value)
// 第二个是键值对的键(key)第三个是下标
<div v-for="(value, key, index) in area">
<h3>{{key}} ---- {{index}}</h3>
<ul>
<li v-for="item in value">{{item}}</li>//因为value是数组所以要再次循环
</ul>
</div>
效果❤
三种创建对象的方法: ❤❤❤
var Obj1 = {};
var Obj2 = new Object();
var Obj3 = Object.create(Object.prototype);
两种创建数组的方法:❤❤❤
var Arr1 = [];
var Arr2 = new Array();
对象的两种取值方式: ❤❤❤❤
console.log(obj.name);
console.log(obj[name]);
数组扁平化❤❤
let arr1 = [1, 2, ['a', 'b', ['中', '文', [1, 2, 3, [11, 21, 31]]]], 3];
console.log(arr1.flat(Infinity)); //[1, 2, 'a', 'b', '中', '文', 1, 2, 3, 11, 21, 31, 3]
for in 遍历对象的key 和 value ❤❤❤
1
var obj = {
name: '大白',
age: 2
}
var arr = []
var arr1 = []
for (let item in obj) {
arr1.push(item) //key
arr.push(obj[item]) //value
}
console.log(arr1); // ['name', 'age'] key
console.log(arr) // ['大白', '2'] 值
2
let obj = {
a: '1',
b: '2',
c: '3',
d: '4'
}
for (let o in obj) {
// console.log(o) //遍历的实际上是对象的属性名称 a,b,c,d
console.log(obj[o]) //这个才是属性对应的值1,2,3,4
}
for of 遍历对象的key 和 值(value)❤❤❤
// fo in遍历数组和对象是遍历的key和value , fo of遍历数组和对象是value,
//但不能遍历普通对象, 要需要配合Object.keys() 一起使用
var person = {
name: 'lang',
age: 25,
say: {
eat: '火鸡面',
city: '北京',
}
}
for (var value of Object.keys(person)) {
//使用Object.keys()方法获取对象key的数组
// console.log(value); //name age say 遍历的是key
console.log(person[value]); //lang 25 {eat: '火鸡面', city: '北京'} 遍历的是值
}
总结:不管是for in还是for of遍历key直接打印 遍历项(item),遍历value打印 对象名[遍历项]
完!
A lot can happen between now and never.
把握当下,一切皆有可能。