009_Vue循环结构
生活随笔
收集整理的這篇文章主要介紹了
009_Vue循环结构
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 循環結構
1.1. v-for遍歷數組, key的作用, 幫助Vue區分不同的元素, 從而提高性能。
<ul v-for="item in books"><li>{{item}}</li> </ul><ul v-for="(item, index) in books"><li>[{{index}}] {{item}}</li> </ul><ul :key="item.id" v-for="(item, index) in bookArr"><li>[{{item.id}}] {{item.name}}</li> </ul>1.2. v-for遍歷對象
<ul v-for="(v, k, index) in book"><li>[{{index}}] {{k}}: {{v}}</li> </ul>2. 循環結構例子
2.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>循環結構</title></head><body><div id="app"><div><ul v-for="item in books"><li>{{item}}</li></ul></div><hr /><div><ul v-for="(item, index) in books"><li>[{{index}}] {{item}}</li></ul></div><hr /><div><ul v-if="index>1" :key="item.id" v-for="(item, index) in bookArr"><li>[{{item.id}}] {{item.name}}</li></ul></div><hr /><div><ul v-for="(v, k, index) in book"><li>[{{index}}] {{k}}: {{v}}</li></ul></div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {books: ["JavaScript DOM編程藝術", "高性能JavaScript", "javascript高級程序設計", "JavaScript權威指南"],bookArr: [{id: 10001, name: "JavaScript DOM編程藝術"}, {id: 10002, name: "高性能JavaScript"}, {id: 10003, name: "javascript高級程序設計"}, {id: 10004, name: "JavaScript權威指南"}],book: {id: 10001, name: "JavaScript DOM編程藝術"},}});</script></body> </html>2.2. 效果圖
總結
以上是生活随笔為你收集整理的009_Vue循环结构的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 032_SpringBoot多环境属性配
- 下一篇： 007_Vue style样式绑定