vue中的v-for

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情

前言

v-for是vue中的一个指令，当有一组数据需要渲染的时候，就可以使用v-for来完成，v-for的语法有点类似javascript中的for循环，语法格式为：item in items，items是数组，item则是数组里的每一项

v-for="item in items"在遍历的过程中依次从items里取出item，在元素的内容中可以使用mustache语法来使用item，如果在数组中需要用到元素在数组中的索引值语法格式为v-for="(item,index) in items"，index代表索引值

v-for的基本使用

v-for遍历数组

<div id="app">
    <!-- 获取key和value -->
    <ul>
        <li v-for="(value,index) in list">{{value}}-{{index}}</li>
    </ul>
</div>

const app=new Vue({
  el:'#app',
  data:{
    list:['v','我','50','吃kfc']
  }
})

v-for遍历对象

在对象中，有key有value，而通过item in info遍历的方式取到的item是对象的value，如果想拿到对象的key可以通过(value,key) in info的方式来获取，如果还想拿到对象的index，也就是第几个属性，可以通过(value,key,index) in info的方式来获取

<div id="app">
    <li v-for="item in info">{{item}}</li>
    <!-- 获取key和value -->
    <ul>
      <li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
    </ul>
</div>

const app=new Vue({
  el:'#app',
  data:{
    info:{
      name:'绝情俏男人',
      age:18,
      height:188
    }
  }
})

v-for绑定key和不绑定key的区别

在官方文档中，推荐我们使用v-for的时候添加上一个:key属性

加上key是为了更好的复用，在我们将真实的dom渲染到浏览器之前会经过一个环节，就是虚拟dom，在虚拟dom里会创建好多个li元素然后补零到真实dom上

但是如果往中间插入数据，会通过diff算法对比真实dom和虚拟dom有哪些东西不一样，将插入虚拟dom的数据渲染到真实的dom中

但是如果不加key的话，往里面插入数据不是真正的插入，而是将原本插入位置的数据变为要插入的数据，原来的数据又往下排，以此类推，相当于插入一条数据，后面的数据都要重新渲染，所以使用key可以为了高效的更新虚拟DOM