Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第1章 Vue.js基础入门

1.8 v-for指令

作用：循环遍历普通数组、对象数组、对象、数字等

1.8.1 遍历普通数组

arrList: ['Python', 'Java', 'JavaScript']

索引：{{i}}-----值：{{item}}
1
2
3

v-for指令中，

• item表示数组里面的每一项
• i表示数组的索引，从0开始
• 使用v-for指令必须绑定key属性，key的属性值可以是不重复的数字或者字符串，也可以直接把数组索引作为key的属性值
• 数据使用插值表达式进行渲染。

1.8.2 遍历对象数组

arrList : [{
    id : 1,
    name : "Python"
},{
    id : 2,
    name : "Java"
},{
    id : 3,
    name : "JavaScript"
}],



        

            
{{item.id}}---{{item.name}}
        
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

绑定Key属性的值是arrList数组对象中的id属性。

item表示数组中的每一项，arrList数组中的每一项都是一个对象，item.属性 → 取属性值。

1.8.3 遍历对象

obj : {
    id : 1,
    name : "vue.js",
    desc : "理念：数据驱动视图和组件化"
}


    

        

            值：{{val}}---键：{{key}}---索引{{i}}
        
    
1
2
3
4
5
6
7
8
9
10
11
12

1.8.4 遍历数字

    

        {{item}}
    

1
2
3
4
5