列表渲染

用 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的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。