v-for使用 · vue

# v-for 注意：v-for遍历出来的不是数据而是元素 ``` v-fro是vue的循环指令，作用是遍历 item是arr数组的每一项枚举值 v-for还有index和key属性 <li v-for="(item,index) in arr" :key="index">{{index}}-{{item}}</li> item指的是被历遍的数组(对象)的每一个值，item的命名不是规定的，可以自定义命名 index指的是每一项被遍历的值的下标索引值 key是用来给每一项值加元素标识，作用是为了区分元素，为了实现最小更新 v-for还可以用来遍历对象的使用 ``` ~~~ <body> <div id="app"> <ul> <li v-for="(item,index) in arr" :key="index">{{index}}-{{item}}</li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script src="vue/vue.js"></script> <script> var vue= new Vue({ el:'#app', data:{ arr:[ '苹果', '橘子', '香蕉', '草莓' ] } }) </script> </body> ~~~ ![](https://img.kancloud.cn/79/17/7917a70455553263301ba60cde7b0529_1145x388.png) ![](https://img.kancloud.cn/0c/45/0c45bc43028393509017b3cce4d93636_919x533.png) <br/><br/> # v-for对象使用方法： ~~~ <li v-for="(item,index) in obj" :key="index">{{index}}:{{item}}</li> ~~~ ![](https://img.kancloud.cn/88/43/8843a015ee8ca94efc99251c91e6d9af_484x226.png) ## v-for 3个参数的说明 ![](https://img.kancloud.cn/34/4b/344b30de3b12882d72e69938d7db3667_1451x310.png) ## 正确的表示方法 ``` <li v-for="(item,key,index) in obj" :key="index">{{index}}---{{key}}:{{item}}</li> ``` ## 上面的操作一共有三个参数 ## item表示对象的内容， ## key表示的是对象key键值名称 ## index 表示的是当前obj的下标索引值 # 实际工作中用 v-for遍历json