vue的循环遍历，指令v-for

1.循环遍历

1.循环遍历:
    vue的循环遍历用v-for，语法类似于js中的for循环
    当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。

2.v-for使用格式：
   格式为：v-for = item in items
          (遍历items中的数据)

2.v-for遍历数组

1.v-for遍历数组
     用v-for指令基于一个数组来渲染一个列表。
     v-for 指令使用item in items形式的语法，
     其中items是源数据数组， 而item则是被迭代的数组元素。

* 如果v-for遍历数组中的数组值
   语法格式：v-for="movie in movies"
   依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie
     <li v-for="movie in movies"> {{movie}} </li>

* 如果v-for遍历数组中的数组值、索引值
     语法格式：v-for=(item, index) in items
      v-for中使用二个参数，即当前项和当前项的索引
      <li v-for="(item, index) in items">{{index}}. {{item}}</li>

<div id="app">
  <ul>
    <li v-for="name in names">{{name}}</li>
  </ul>
   //v-for遍历过程中，遍历数组中值,并显示

  <ul>
    <li v-for="(name,index) in names">{{index}}. {{name}}</li>
  </ul>
   //遍历过程中，遍历数组中值、索引值，并显示
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
      names:["刘富楠","科比","詹姆斯","库里"]
    }
  })
</script>

3.v-for遍历对象

v-for遍历对象：
 1.遍历对象属性 用value值
 2.遍历对象属性和属性值 用value值和key
 3.遍历对象属性和属性值和索引 用value值、key和index

<div id="app">
//展示出所有信息
  <ul>
    <li >{{info.name}}</li>
    <li >{{info.age}}</li>
    <li >{{info.height}}</li>
  </ul>
  //方法1.一个个写出来
  <ul>
    <li v-for="item in info">{{item}}</li>
  </ul>
  //方法2.用v-for遍历对象的value值。(属性)
  <ul>
    <li v-for="(value,key) in info">{{value}}--{{key}}</li>
  </ul>
  //方法3.用v-for遍历对象的value值和key，value在前面。(属性和属性值)
  <ul>
    <li v-for="(value,key,index) in info">{{value}}--{{key}}--{{index}}</li>
  </ul>
  //方法4.用v-for遍历对象的value值、key和index。(属性和属性值和索引)
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
     info:{
        name:"lfn",
        age :18,
        height:180
      }
     }
  })
</script>    

4.v-for使用中添加key

在遍历数组时可以在元素中绑定一个key，key=数组值

绑定key的作用 ：主要是为了高效的更新虚拟DOM。(vue内部；让性能高一点)

* 当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点，
   则Diff算法默认执行起来是比较复杂的。(一个个重新替换)
* 但绑定key后，可以使用key来给每个节点做一个唯一标识
   Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

<div id="app">
  <ul>
    <li v-for="item in letters" :key="item">{{item}}</li>
  </ul>
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
      letters:["A","B","C","D","E"]
    }
  })
</script>