[JS][Vue]学习记录之v-for

<script>
    var app = new Vue({
        el:'#app',
        data:{
            names:['allen','marry','tom'],
            person:
                [{name:'allen1',age:27},
                {name:'allen2',age:28},
                {name:'allen3',age:29},
                 ]
        }
    });
</script>

我们直接看下面的代码:

    <lu>
        <!--names是vue中的数组,name是自定义的变量-->
        <li v-for="name in names">
            {{name}}<!--拿到name就可以显示-->
        </li>
    </lu>
  
    <!--template 可以省略一些不必要的dom元素-->
    <template v-for="(user,index) in person">
         <!--index是下标,user是person的元素,person是vue中的数组-->
        {{index}}:{{user.name}}-{{user.age}}
    </template>
    <template v-for="user in person">
        <p v-for="(value,key) in user">
            value:{{value}} - key:{{key}}
        </p>
    </template>

代码说明:

• v-for="name in names",这个names代表的就是vue对象中的数组names,name是我们自己定义的一个变量.
• v-for="(user,index) in person",其中person是vue对象中的数组person,user是person中的对象元素,index是对象元素的下标.
• "(value,key) in user",value和key是user里面的value和key,通过这种方式可以拿到对应需要的value或者key
• template可以帮我们省略一些不必要的dom元素,例如我一个块只用<span>就可以解决问题的,但是我多套了一层<div>,这个时候template就可以帮我们省略掉这个<div>了.