當前位置：
首頁 >
009_Vue循环结构
發(fā)布時間：2025/5/22
75
豆豆
生活随笔
收集整理的這篇文章主要介紹了
009_Vue循环结构
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1. 循環(huán)結(jié)構(gòu)
1.1. v-for遍歷數(shù)組, key的作用, 幫助Vue區(qū)分不同的元素, 從而提高性能。
<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. 循環(huán)結(jié)構(gòu)例子
2.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>循環(huán)結(jié)構(gòu)</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編程藝術(shù)", "高性能JavaScript", "javascript高級程序設(shè)計", "JavaScript權(quán)威指南"],bookArr: [{id: 10001, name: "JavaScript DOM編程藝術(shù)"}, {id: 10002, name: "高性能JavaScript"}, {id: 10003, name: "javascript高級程序設(shè)計"}, {id: 10004, name: "JavaScript權(quán)威指南"}],book: {id: 10001, name: "JavaScript DOM編程藝術(shù)"},}});</script></body> </html>2.2. 效果圖
總結(jié)
以上是生活随笔為你收集整理的009_Vue循环结构的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 032_SpringBoot多环境属性配
- 下一篇： 007_Vue style样式绑定