詳解Vue渲染列表指令：v-for
在
之前的文章中，我們學習了在Vue中如何透過v-if和v-show根據條件渲染所需的DOM元素或模板。在實際的專案中，我們很多時候會碰到將JSON資料中的陣列或物件渲染出清單之類的元素。在Vue中，提供了一個v-for的指令，可以渲染清單。 （學習影片分享：vue影片教學）
v-for 的作用
##v-for
alias in expression，為目前遍歷的元素提供別名：
<div v-for="alias in expression"> {{ alias }}</div>一般都是給陣列或物件指定別名，除此之外還可以為索引值指定別名，對於物件也可以給value指定別名，常見的幾個情形如下：<div v-for="item in items">{{ item }}</div>
<div v-for="(item, index) in items">{{ item }} {{ index }}</div>
<div v-for="val in object"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>其中我們也可以把in#換成 of作為分隔符，因為它是最接近JavaScript迭代器的語法。
v-for的預設行為試著不要改變整體，而是取代元素。迫使其重新排序的元素，你需要提供一個
key的特殊屬性：
<div v-for="itme in items" :key="item.id"> {{ item.text }}</div>接下來，我們看看v-for的一些使用場景。 v-for#使用v-for指令把陣列的選項清單進行渲染。 v-for指令需要使用
形式的特殊語法，
items
item是數組元素迭代的別名。來看一個簡單的範例：
<!-- Template -->
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
// JavaScript
var app = new Vue({
el: '#app',
data: {
items: [1, 34, 89, 92, 45, 76, 33]
}
})這個時候，陣列items的每個item渲染到對應的li中，在瀏覽器看到的效果如下：
v-for把陣列items
li中，除此之外，還可以把陣列的每個index也遍歷出來。在上面的程式碼的基礎上，咱們修改一下模板：
<ul>
<li v-for="(item, index) in items">index-{{ index }}: {{ item }}</li>
</ul>
v-for就寫在那個元素上。 上面我們已經可以正常的使用v-for
computed
屬性。 在Vue中，我們無法污染來源數據，如果我們直接對來源資料items透過sort()方法進行排序，將會報錯的：var app = new Vue({
el: '#app',
computed: {
items: function() {
return this.items.sort()
}
},
data: {
items: [1, 34, 89, 92, 45, 76, 33]
}
})
為了不會污染Vue中的來源數據，需要在computed裡重新宣告一個對象，例如宣告一個sortItems
var app = new Vue({
el: '#app',
computed: {
sortItems: function() {
return this.items.sort()
}
},
data: {
items: [1, 34, 89, 92, 45, 76, 3, 12]
}
})<ul>
<li v-for="item in sortItems">{{ item }}</li>
</ul>
如果不出意外的話，你看到的效果將是這樣的：雖然有變化了，但不是我們想要的排序結果。雖然結果不是我們想要的，但這並不是Vue本身的問題，在JavaScript中也是這樣。如果我們想要真正的實作一個排序效果，那麼需要加入一個JavaScript的陣列的排序函數的功能：function sortNumber(a, b) {
return a - b
}把computed
裡的程式碼也做一個對應的修改：
computed: {
sortItems: function() {
return this.items.sort(sortNumber)
}
}data: {
objItems: [
{
firstName: 'Jack',
lastName: 'Li',
age: 34
},
{
firstName: 'Airen',
lastName: 'Liao',
age: 18
}
]
} <li v-for="objItem in objItems">{{ objItem.firstName }} {{objItem.lastName}} is {{ objItem.age}} years old!</li>在JavaScript中，我们有很多数组的方法，可以对数组进行操作，这些方法可以修改一个数组。其实，在Vue中同样包含一组观察数组变异方法，这些方法将会触发元素的重新更新（视图更新），这些方法也是JavaScript中数组中常看到的方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()。我们可以在控制台中简单的看一下前面的示例中items数组调用变异方法的效果：
Vue不但提供了数组变异的方法，还提供了替换数组的方法。变异方法可以通过些方法的调用修改源数据中的数组；除此之外也有对应的非变异方法，比如filter()、concat()和slice()等。这些方法是不会改变源数据中的原始数组，但总是返回一个新数组。当使用这些方法时，可以用新数组替换旧数组。
由于JavaScript的限制，Vue不能检测以下变动的数组：
- 当你利用索引直接设置一个项时，例如
app.items[indexOfItem] = newValue - 当你修改数组的长度时，例如：
app.items.length = newLength
为了解决第一类问题，以下两种方式都可以实现和app.items[indexOfItem = newValue相同的效果，同时也将触发状态更新：
Vue.set(app.items, indexOfItem, newValue) app.items.splice(indexOfItem, 1, newValue)
为了解决第二类问题，你可以使用splice():
app.items.splice(newLength)
对象的 v-for
v-for除了可以使用在数组上之外还可以应用在对象上。
<!-- Template -->
<ul>
<li v-for="value in obj">{{ value }}</li>
</ul>
// JavaScript
obj: {
firstName: 'Airen',
lastName: 'Liao',
age: 30
}使用v-for可以把obj的每个key对应的value值遍历出来，并且填到对应的li元素中。效果如下：
你也可以给对象的key遍历出来：
<ul>
<li v-for="(value, key) in obj">{{ key }}: {{ value }}</li>
</ul>效果如下：
同样，也可以类似数组一样，可以把index索引做为第三个参数：
<ul>
<li v-for="(value, key, index) in obj">{{ index }}. {{ key }}: {{ value }}</li>
</ul>
前面提到过，数组可以变异，但对于对象而言，Vue不能检测对象属性的添加或删除。这主要也是由于JavaScript的限制。不过在Vue中，对于已经创建好的实例，可以使用Vue.set(object, key, value)方法向嵌套对象添加响应式属性。例如：
var app = new Vue({
data: {
obj: {
name: 'Airen'
}
}
})可以使用类似下面的方式，给obj对象添加一个新的属性age：
Vue.set(app.obj, 'age', 27)
回到我们的示例中给数据源中的obj添加一个'from'的key，而且其对应的value值为'江西'：
除了Vue.set()之外，还可以使用app.$set实例方法，它其实就是Vue.set的别名:
mounted(){
this.$set(this.obj, '职位', '码农')
}
这里用到了Vue中的
mounted()，和computed一样，也不知道他在Vue中的作用，同样放到后面来。我们总是会搞明白的。
有时候你可能需要为已有对象赋予多个新属性，比如使用Object.assign()或_.extend()。在这种情况下，应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：
Object.assign(this.obj, {
age: 27,
favoriteColor: 'Vue Green'
})应该这样做：
this.obj = Object.assign({}, this.obj, {
age: 27,
favoriteColor: 'Vue Green'
})一段取值范围的 v-for
v-for也可以取整数。在这种情况下，它将重复多次模板：
<ul>
<li v-for="n in 10">{{ n }}</li>
</ul>结果如下：
v-for 和 一个 <template>
类似于v-if，你也可以利用带有v-for的<template>渲染多个元素，比如：
<ul>
<template v-for="(value, key) in obj">
<li>
<label :for="key">{{ key }}:</label>
<input type="text" :placeholder="value" :id="key" />
</li>
</template>
</ul>效果如下：
注意了，v-for和<template>一起使用的时候，需要把v-for写在<template>元素上。另外上面的示例中，咱们还使用了Vue的一些其他特性，但这些特性不是这节内容所要学习的。后面我们会有机会一一介绍的。
一个组件的 v-for
在自定义组件里，也可以像任何普通元素一样用v-for。
<my-component v-for="item in items" :key="item.id"></my-component>
2.2.0+ 的版本里，当在组件中使用
v-for时，key现在是必须的。
然而他不能自动传递数据到组件里，因为组件有自己独立的作用域。为了传递迭代数据到组件里，我们要用 props：
<my-component
v-for="(item, index) in items"
v-bind:item="item"
v-bind:index="index"
v-bind:key="item.id"
></my-component>不自动注入 item 到组件里的原因是，因为这使得组件会与 v-for 的运作紧密耦合。在一些情况下，明确数据的来源可以使组件可重用。
来看一个简单的Todo示例：
<div id="todo">
<input
v-model="newTodoText"
v-on:keyup.enter="addNewTodo"
placeholder="Add a todo"
/>
<ul>
<li
is="todoItem"
v-for="(todo, index) in todos"
v-bind:title="todo"
v-on:remove="todos.splice(index, 1)"></li>
</ul>
</div>
Vue.component('todoItem', {
template:`
<li>
{{ title }}
<button v-on:click="$emit('remove')">x</button>
</li>
`,
props: ['title']
})
new Vue({
el: '#todo',
data: {
newTodoText: '',
todos: [
'Do the dishes',
'Take out the trash',
'Mow the lawn'
]
},
methods: {
addNewTodo: function() {
this.todos.push(this.newTodoText)
this.newTodoText = ''
}
}
})
总结
这篇文章主要总结了Vue的v-for指令。通过这个指令，配合数据源中的数组或者对象，我们可以很方便的生成列表。这也常常称为列表渲染。当然配合一些模板，我们可以做出一些特有的功能和效果。比如文章中最后一个Todo 列表，使用v-for很易实现。
以上是詳解Vue渲染列表指令：v-for的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
vue中怎麼用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。
vue怎麼給按鈕添加函數
Apr 08, 2025 am 08:51 AM
可以通過以下步驟為 Vue 按鈕添加函數：將 HTML 模板中的按鈕綁定到一個方法。在 Vue 實例中定義該方法並編寫函數邏輯。
vue中的watch怎麼用
Apr 07, 2025 pm 11:36 PM
Vue.js 中的 watch 選項允許開發者監聽特定數據的變化。當數據發生變化時，watch 會觸發一個回調函數，用於執行更新視圖或其他任務。其配置選項包括 immediate，用於指定是否立即執行回調，以及 deep，用於指定是否遞歸監聽對像或數組的更改。
vue返回上一頁的方法
Apr 07, 2025 pm 11:30 PM
Vue.js 返回上一頁有四種方法：$router.go(-1)$router.back()使用 <router-link to="/"> 組件window.history.back()，方法選擇取決於場景。
vue多頁面開發是啥意思
Apr 07, 2025 pm 11:57 PM
Vue 多頁面開發是一種使用 Vue.js 框架構建應用程序的方法，其中應用程序被劃分為獨立的頁面：代碼維護性：將應用程序拆分為多個頁面可以使代碼更易於管理和維護。模塊化：每個頁面都可以作為獨立的模塊，便於重用和替換。路由簡單：頁面之間的導航可以通過簡單的路由配置來管理。 SEO 優化：每個頁面都有自己的 URL，這有助於搜索引擎優化。
React與Vue：Netflix使用哪個框架？
Apr 14, 2025 am 12:19 AM
NetflixusesAcustomFrameworkcalled“ Gibbon” BuiltonReact，notReactorVuedIrectly.1）TeamSperience：selectBasedonFamiliarity.2）ProjectComplexity：vueforsimplerprojects：reactforforforproproject，reactforforforcompleplexones.3）cocatizationneedneeds：reactoffipicatizationneedneedneedneedneedneeds：reactoffersizationneedneedneedneedneeds：reactoffersizatization needefersmoreflexibleise.4）
vue.js怎麼引用js文件
Apr 07, 2025 pm 11:27 PM
在 Vue.js 中引用 JS 文件的方法有三種：直接使用 <script> 標籤指定路徑；利用 mounted() 生命週期鉤子動態導入；通過 Vuex 狀態管理庫進行導入。
vue遍歷怎麼用
Apr 07, 2025 pm 11:48 PM
Vue.js 遍歷數組和對像有三種常見方法：v-for 指令用於遍歷每個元素並渲染模板；v-bind 指令可與 v-for 一起使用，為每個元素動態設置屬性值；.map 方法可將數組元素轉換為新數組。
