列表渲染

用 v-for 把一個數組對應為一組元素

<div id="app"><li v-for = "item in array">{{item.message}}</li> </div> <script>var app = new Vue({el: '#app',data: {array:[{message:'vue1'},{message:'vue2'},{message:'vue3'}]},}) </script> <div id="app"><li v-for = "item in array">{{item}}</li> </div> <script>var app = new Vue({el: '#app',data: {array:['vue1','vue2','vue3']},}) </script>

結果：

v-for 還支持一個可選的第二個參數為當前項的索引。

<div id="app"><ul id="example-2"><li v-for="(item, index) in items">{{ index }} - {{ item.message }}</li></ul> </div> <script>var example2 = new Vue({el: '#example-2',data: {items: [{message:'vue1'},{message:'vue2'},{message:'vue3'}]}}) </script>

結果：

對象的 v-for
可以用 v-for 通過一個對象的屬性來迭代。

<ul id="v-for-object" class="demo"><li v-for="value in object">{{ value }}</li> </ul> <script>new Vue({el: '#v-for-object',data: {object: {o: 'vue1',ob: 'vue2',obj: 'vue3'}}}) </script>

結果：

<ul id="v-for-object" class="demo"><li v-for="(value,key) in object">{{key}}: {{ value }}</li> </ul> <script>new Vue({el: '#v-for-object',data: {object: {obj1: 'vue1',obj2: 'vue2',obj3: 'vue3'}}}) </script>

結果：

<ul id="v-for-object" class="demo"><li v-for="(value,key,index) in object">{{index}}. {{key}}: {{ value }}</li> </ul> <script>new Vue({el: '#v-for-object',data: {object: {obj1: 'vue1',obj2: 'vue2',obj3: 'vue3'}}}) </script>

結果:

轉載于:https://www.cnblogs.com/qfstudy/p/9317730.html

總結

以上是生活随笔為你收集整理的Vue学习笔记5的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。