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 指令使用itemin 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>

<divid="app"><!-- 1.在遍历过程中没有使用索引值 --><ul><liv-for="item in names">{{item}}</li></ul><!-- 2.在遍历的过程中获取索引值 --><ul><liv-for="(item,index) in names">{{index+1}} {{item}}</li></ul></div><scriptsrc="../js/vue.js"></script><script>const app=newVue({
	el:"#app",
	data:{
		names:['why','kobe','james','curry']}})</script>

3.v-for遍历对象

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

<divid="app"><!-- 1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是value --><ul><liv-for="item in info">{{item}}</li></ul><!-- 2.获取key和value格式 (value,key) --><ul><liv-for="(value,key) in info">{{value}}-{{key}}</li></ul><!-- 3.获取key和value和index格式 (value,key,index) --><ul><liv-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li></ul></div><scriptsrc="../js/vue.js"></script><script>const app=newVue({
        el:"#app",
        data:{
            info:{
                name:'why',
                age:18,
                height:1.88}}})</script>

4.v-for使用中添加key

在遍历数组时可以在元素中绑定一个key，key=数组值
绑定key的作用 ：**主要是为了高效的更新虚拟DOM**。(vue内部；让性能高一点)* 当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点，则Diff算法默认执行起来是比较复杂的。(一个个重新替换)* 但绑定key后，可以使用key来给每个节点做一个唯一标识
   Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

<divid="app"><ul><liv-for="item in letters":key="item">{{item}}</li></ul></div><scriptsrc="../js/vue.js"></script><script>const app=newVue({
        el:"#app",
        data:{
            letters:['a','b','c','d','e']}})</script>