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