v-for迭代

注意：

1.即使遍历数字时用不到任何的Model实例中的任何值，也需要创建一个实例才可以正常运行

2.v-for遍历任何数组都可以建立索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
     <div id="app">
         <p v-for="item in list">{{item}}</p>
         <!--item是每一项迭代的名字，in指定迭代的数组-->
         
         <p v-for="(item2,i) in list">索引：{{i}}--值：{{item2}}</p>
         <!--为循环建立索引，跟原生js的用法差不多-->
     </div>
     <!--遍历普通数值数组-->
     
     <div id="app2">
         <p v-for="(item,i) in list">{{ item.name }}--{{ item.schoolId }}i--{{ i }}</p>
         <!--索引可省略-->
     </div>
     <!--遍历对象数组-->

     <div id="app3">
         <p v-for="(val,key,i) in Obj">值:{{ val }}--键:{{ key }}--索引:{{ i }}</p>
         <!--索引可省略-->
     </div> 
     <!--遍历对象-->

     <div id="app4">
         <p v-for="count in 3">我爱{{ count }}</p>
         <!--这里即使不用Model实例里面的任何值,也需要创建一个才能执行-->
     </div>
     <!--遍历数字-->

     <script>
         var vm = new Vue({
            el:'#app',
            data:{
                list:[22,33,44,55],
            },
            methods:{} 
         });
         var vm2 = new Vue({
            el:'#app2',
            data:{
                list:[
                    {name:'陈小帅',schoolId:160720131},
                    {name:'chenxiaoshuai',schoolId:160720131},
                    {name:'chensmallcool',schoolId:160720131}
                ]
            },
            methods:{} 
         });
         var vm3 = new Vue({
            el:'#app3',
            data:{
                Obj:{name:'陈小帅',schoolId:160720131,QQ:3199578835}
            },
            methods:{} 
         });
         var vm4 = new Vue({
            el:'#app4',
            data:{
            },
            methods:{} 
         });
     </script>
</body>
</html>

效果：

注意：

猜你喜欢