Vue v-for详细使用

246 阅读3分钟

目录

定义vue数据❤

vue循环数组❤❤❤❤

vue循环对象❤❤❤❤

效果❤

 三种创建对象的方法:❤❤❤

 两种创建数组的方法:❤❤❤

对象的两种取值方式: ❤❤❤❤

数组扁平化❤❤

for in 遍历对象的key 和 value  ❤❤❤

 for of 遍历对象的key 和 值(value)❤❤❤


定义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.
把握当下,一切皆有可能。