Vue 循环遍历 和 一点点key理解应用

1.遍历数组

<div id="app">
    <ul>
        <li v-for="item in names">{{item}}</li>
        //遍历过程中不获取索引值
    </ul>
    <ul>
        <li v-for="（item,index）in names">{{index}}{{item}}</li>
        //遍历过程中获取索引值
    </ul>
</div>
</body>
<script>
const app = new  Vue({
    el:"#app",
    data:{
        names:['123456','456789','345678','45678']
    }
})
</script>

2.遍历对象

<div id="app">
    <ul>
        <li v-for="item in names">{{item}}</li>
        //拿到的都是value
    </ul>
    <ul>
        <li v-for="（value，key）in names">{{key}}:{{value}}</li>
        //拿到的对象的key  value  index
    </ul>
     <ul>
        <li v-for="（value，key,index）in names">{{index}}.{{key}}:{{value}}</li>
        //拿到的对象的key  value  index
    </ul>
</div>
</body>
<script>
const app = new  Vue({
    el:"#app",
    data:{
       info:{
       name:'34',
       age:11,
       height:20
       }
    }
})
</script>

3.v-for 使用过程 添加key

推荐使用 提高性能 根据key对照已有的内容原来的会复用 在li中间插入新的别的li vue会从头找 从不对的开始删除后面的 有key就会复用
在后面插入则无所谓

<div id="app">
    <ul>
        <li v-for="item in names" :key="item">{{item}}</li>
        //key不要绑定index  key要绑定唯一性的  
    </ul>
</div>
</body>
<script>
const app = new  Vue({
    el:"#app",
    data:{
       info:{
       name:'34',
       age:11,
       height:20
       }
    }
})
</script>