vue之v-for
阿新 • • 發佈：2018-10-10
依賴 doc term var 內容 bar tom john 可選參數
vue.js 的循環渲染是依賴於 v-for 指令，它能夠根據 vue 的實例裏面的信息，循環遍歷所需數據，然後渲染出相應的內容。它可以遍歷數組類型以及對象類型的數據，js 裏面的數組本身實質上也是對象，這裏遍歷數組和對象的時候，方式相似但又稍有不同。
對象遍歷
value 是遍歷得到的屬性值，key 是遍歷得到的屬性名，index 是遍歷次序，這裏的 key/index 都是可選參數，如果不需要，這個指令其實可以寫成 v-for="value in me"；
<!DOCTYPE html> <html lang="en"> <head> <metacharset="UTF-8"> <title>vue</title> <script src="./vue.js"></script> </head> <body> <div id="demo"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script> var demo = new Vue({ el:‘#demo‘, data:{ object: { firstName: ‘John‘, lastName: ‘Doe‘, age: 30 } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="./vue.js"></script> </head> <body> <div id="demo"> <div v-for="(value, key,index) in object"> {{ index }} : {{ key }} : {{ value }} </div> </div> <script> var demo = new Vue({ el:‘#demo‘, data:{ object: { firstName: ‘John‘, lastName: ‘Doe‘, age: 30 } } }) </script> </body> </html>
數組遍歷
數組遍歷和對象遍歷相類似，最大的不同點在於對象的 “key” 和 “index” 是一致的，所以這裏我們只需要取一個 index 即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="./vue.js"></script> </head> <body> <div id="demo"> <ul> <li v-for="(item, index) in items" v-on:click="onclick(index)">{{index}}：{{item}}</li> </ul> </div> <script> var demo = new Vue({ el:‘#demo‘, data:{ items: [‘apple‘, ‘tomato‘, ‘banana‘, ‘watermelon‘] }, methods:{ onclick(index){ alert(index); } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="./vue.js"></script> </head> <body> <div id="demo"> <ul> <li v-for="todo in items"> {{ todo.message}} </li> </ul> <ul> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> </div> <script> var demo = new Vue({ el:‘#demo‘, data:{ parentMessage: ‘Parent‘, items: [ { message: ‘Foo‘ }, { message: ‘Bar‘ } ], } }) </script> </body> </html>
vue之v-for