當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue的列表渲染指令

發布時間：2025/3/19 vue 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue的列表渲染指令小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

列表渲染指令 v-for

當需要將一個數組便利或者枚舉一個對象循環顯示時，就會用到列表渲染指令? v-for。

它的表達式需要結合in 來使用，類似于item in items的形式。

<!doctype html> <html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Vue內置指令</title></head><body><div id="app"><ul><li v-for="book in books">{{book.name}}</li></ul></div> <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>? <script>var app= new Vue({el:'#app',data:{books:[{name:'《書本1》'},{name:'《書本2》'},{name:'《書本3》'}]}}) </script></body> </html>

在表達式中，books是數據，book是當前元素的別名，循環出的每個<li>元素內的元素都可以訪問到

對應的當前數據book

列表渲染也支持用of 代替in 作為分隔符

???<li v-for="book?of books">{{book.name}}</li>

v-for的表達式支持一個可選參數作為當前項的索引：

<div id="app"><ul><li v-for="(book,index) in books">{{index}}-{{book.name}}</li></ul></div> <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>? <script>var app= new Vue({el:'#app',data:{books:[{name:'《書本1》'},{name:'《書本2》'},{name:'《書本3》'}]}}) </script>

除了數組外，對象的屬性也是可以遍歷的：

<div id="app1"><ul><span v-for="value in user">{{value}}<br></span></ul></div>var app1= new Vue({el:'#app1',data:{user:{name:'badao',age:22,tel:11111111}}

v-for還可以迭代整數：

<div id="app3"><span v-for="n in 10">{{n}}</span></div>var app3 = new Vue({el:'#app3'})

總結

以上是生活随笔為你收集整理的Vue的列表渲染指令的全部內容，希望文章能夠幫你解決所遇到的問題。

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