Vue10-9 DOM中的v-for和 JS中的for(){}

1.  DOM中的v-for使用情况（1. 对于数组  2. 对于对象）

  　　　<h3>数组数据打印:</h3>
        <!--  item为数组中的元素 -->
        <h3 v-for="item in message"  :key="item">{{item}}</h3>
        <!-- （val, index）前为元素值，后为下标 -->
        <h3 v-for="(val, index) in message" :key="index">{{index}}-{{val}}</h3><br/><br/>

        <h3>对象数据打印</h3>
        <!-- item为对象中的value -->
        <h3 v-for="item in student">{{item}}</h3>
        <!-- （val, key）前value 后key -->
        <h3 v-for="(val, key) in student">{{key}}-{{val}}</h3>
        <!-- (val值, key键, index下标)  -->
        <h3 v-for="(val, key, index) in student">{{index}}-{{key}}-{{val}}</h3>

2. JS中的for使用

 // 对于对象，不能使用for(let  val  of obj){} ,会提示不是可迭代对象
        let person = {
            name: '张三',
            sex: '男'
        };
        for (let key in person){
            console.log(key);
        };

  // 对于数组 可以使用in  和  of
        let arr = [1,3,2,8,5];
        // 获取key下标
        for (let key in arr){
            console.log(key);
        };
        // 获取元素
        for (let val of arr){
            console.log(val);
        };