介绍
对于前端应用程序来说,一个常见的要求是列出项目,它可以采取做事列表和卡系统的形式。Vue.js支持使用内置的v-for<核心指令将项目列表渲染到浏览器上。
在本文中,我们将探索如何在Vue应用程序中使用v-for。
前提条件
本文假定您对 JavaScript 中的环节、数组和对象有某些知识. 如果您开始使用 JavaScript,您可以(https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript)参考此系列。
此探索将基于使用 Vue.js 框架的 CDN (内容交付网络) 托管副本的 HTML 文件:
1[label vfor.html]
2<!DOCTYPE html>
3<html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <title>v-for</title>
7 </head>
8
9 <body>
10
11 <div id="app">
12 <h1>{{ message }}</h1>
13 </div>
14
15 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
16
17 <script>
18 new Vue({
19 el: "#app",
20 data() {
21 return {
22 message: "hello"
23 }
24 }
25 });
26 </script>
27
28 </body>
29</html>
你可以 参见此帖子如果你开始使用Vue.js。
在此时,如果您要上传此代码并在浏览器中查看此文件,您将看到消息:你好 。
使用「v-for」與範圍
内置的v-for指令允许我们通过项目循环。
我们可以使用v-for指令中的范围来重复指定次数。
让我们用一个未分类的列表来替代我们的div的内容,该列表重复了15次:
1[label vfor.html]
2<div id="app">
3 <ul>
4 <li v-for="item in 15">{{ item }}</li>
5 </ul>
6</div>
这将导致一个无序列表的数字1到15。
使用<template>元素
v-for指令只适用于它所附带的元素,如果多个项目应与v-for指令重复,我们应该将元素包装在一个<模板>元素中。
让我们把我们div的内容替换成template:
1[label vfor.html]
2<div id="app">
3 <template v-for="item in 15">
4 <span>{{ item }}</span>
5 <button>Count</button>
6 </template>
7</div>
这将导致重复<span>和<button>的集合。
使用v-for与对象
我们可以从数据模型中循环过一个objectItems对象中的值,这可以通过在应该重复的元素中添加v-for指令来实现。
让我们修改data()中的行,以便返回一个objectItems对象:
1[label vfor.html]
2<script>
3new Vue({
4 el: "#app",
5 data() {
6 return {
7 objectItems: {
8 key1: 'item1',
9 key2: 'item2',
10 key3: 'item3'
11 }
12 }
13 }
14});
15</script>
让我们用一个重复列表项目的未分类列表来代替我们div的内容:
1[label vfor.html]
2<div id="app">
3 <ul>
4 <li v-for="item in objectItems">{{ item }}</li>
5 </ul>
6</div>
以下是事情将如何看起来:
1[secondary_label Output]
2<div id="app">
3 <ul>
4 <li>item1</li>
5 <li>item2</li>
6 <li>item3</li>
7 </ul>
8</div>
这将导致对象的属性值的无序列表。
除了属性值外,我们在使用Vue旋转对象时还会获得两个额外的参数,即关键和索引值。
钥匙值为我们提供访问当前的属性密钥。
索引为我们提供了循环中的当前项目的索引,这是循环列表中的项目的位置。
让我们用一个未分类的列表来替代我们的<div>的内容,该列表重复了项目,关键和索引的列表项目:
1[label vfor.html]
2<div id="app">
3 <ul>
4 <li v-for="(item, key, index) in objectItems">
5 {{ item }} - {{ key }} - {{ index }}
6 </li>
7 </ul>
8</div>
以下是事情将如何看起来:
1[secondary_label Output]
2<div id="app">
3 <ul>
4 <li>item1 - key1 - 1</li>
5 <li>item2 - key2 - 2</li>
6 <li>item3 - key3 - 3</li>
7 </ul>
8</div>
这将导致一个没有排序的列表,其中包含项目,钥匙和索引。
使用v-for与 Arrays
从数据模型中,我们可以从shoppingItems数组中旋转项目,这可以通过在应该重复的元素中添加v-for指令来实现。
让我们在data()中修改行,以便返回包含对象的shoppingItems数组:
1[label vfor.html]
2<script>
3new Vue({
4 el: "#app",
5 data() {
6 return {
7 objectItems: {
8 key1: 'item1',
9 key2: 'item2',
10 key3: 'item3'
11 },
12 shoppingItems: [
13 { name: 'apple', price: '7' },
14 { name: 'orange', price: '12' }
15 ]
16 }
17 }
18});
19</script>
我们可以循环在shoppingItems数组中的对象,并使用给定的密钥访问这些值。
让我们用一个未分类的列表来替代我们的<div>的内容,该列表重复了item.name和item.price的列表项目:
1[label vfor.html]
2<div id="app">
3 <ul>
4 <li v-for="item in shoppingItems">
5 {{ item.name }} - {{ item.price }}
6 </li>
7 </ul>
8</div>
以下是事情将如何看起来:
1[secondary_label Output]
2<div id="app">
3 <ul>
4 <li>apple - 7</li>
5 <li>orange - 12</li>
6 </ul>
7</div>
这将导致从数组中列出的值的无序列表。
使用v-bind:key来跟踪元素
当数组顺序被更改时,默认情况下,Vue 会更改每个现有元素中的数据,而不是将 DOM 元素移动到更新的位置。
我们可以将Vue设置为使用密钥跟踪每个元素,这会导致它移动元素而不是替换值。
此值应为正在迭代的每个元素独特。
让我们使用item.name来分配一个密钥:
1[label vfor.html]
2<div id="app">
3 <ul>
4 <li v-for="item in shoppingItems" v-bind:key="item.name">
5 {{ item.name }} - {{ item.price }}
6 </li>
7 </ul>
8</div>
现在,Vue有一个方法来跟踪节点的身份,随着更改的发生。
管理变化
在外框中,v-for支持数组突变方法,这些是push,pop,shift,unshift,splice,sort和reverse。
此外,当我们用新数组代替数组时,Vue 会找到最优化的更新项目的方式。
变化管理问题
在数组中更改时,Vue无法跟踪的两件事是:
- 直接设置项目
例子:
1data.shoppingItems[3] = { price: 10, name: 'pineapple' };
这可以通过使用Vue.set方法来解决,该方法接受数组、索引和新值。
1Vue.set(data.shoppingItems, 3, { price: 10, name: 'pineapple' });
此外,我们可以使用splice来为给定的索引设置值。
更改数组长度
例子:
1data.shoppingItems.length = 2;
我们可以使用splice来修改数组长度,而不是直接设置它以避免问题。
过滤清单
我们可以过滤正在显示的列表,而不改变原始列表,这可以通过使用计算值或通过设置v-for值时有方法和传输值来完成。
使用计算值来过滤项目
相反,我们将值直接设置在列表上,而不是指向一个计算值,我们可以写出在该计算函数中过滤数据的逻辑。
首先,我们来定义LessThanTen:
1[label vfor.html]
2<script>
3new Vue({
4 el: "#app",
5 data() {
6 return {
7 objectItems: {
8 key1: 'item1',
9 key2: 'item2',
10 key3: 'item3'
11 },
12 shoppingItems: [
13 { name: 'apple', price: '7' },
14 { name: 'orange', price: '12' }
15 ]
16 }
17 },
18 computed: {
19 itemsLessThanTen: function() {
20 return this.shoppingItems.filter(function(item) {
21 return item.price < 10;
22 })
23 }
24 }
25});
26</script>
然后,让我们修改v-for以使用itemsLessThanTen:
1[label vfor.html]
2<div id="app">
3 <ul>
4 <li v-for="item in itemsLessThanTen" v-bind:key="item.name">
5 {{ item.name }} - {{ item.price }}
6 </li>
7 </ul>
8</div>
以下是事情将如何看起来:
1[secondary_label Output]
2<div id="app">
3 <ul>
4 <li>apple - 7</li>
5 </ul>
6</div>
itemLessThanTen函数使用JavaScript的过滤函数返回任何价格小于10的项目。
使用方法过滤项目
在这种方法中,我们将相同的购物项目列表直接传递到我们定义的方法中,通过这样做,数组中的所有项目将根据方法定义进行过滤。
首先,我们来定义‘过滤器’:
1[label vfor.html]
2<script>
3new Vue({
4 el: "#app",
5 data() {
6 return {
7 objectItems: {
8 key1: 'item1',
9 key2: 'item2',
10 key3: 'item3'
11 },
12 shoppingItems: [
13 { name: 'apple', price: '7' },
14 { name: 'orange', price: '12' }
15 ]
16 }
17 },
18 computed: {
19 itemsLessThanTen: function() {
20 return this.shoppingItems.filter(function(item) {
21 return item.price < 10;
22 })
23 }
24 },
25 methods: {
26 filterItems: function(items) {
27 return items.filter(function(item) {
28 return item.price < 10;
29 })
30 }
31 }
32});
33</script>
然后,让我们修改v-for以使用filterItems:
1[label vfor.html]
2<div id="app">
3 <ul>
4 <li v-for="item in filterItems(shoppingItems)" v-bind:key="item.name">
5 {{ item.name }} - {{ item.price }}
6 </li>
7 </ul>
8</div>
以下是事情将如何看起来:
1[secondary_label Output]
2<div id="app">
3 <ul>
4 <li>apple - 7</li>
5 </ul>
6</div>
filterItems方法执行与计算值示例相同的函数,最终结果将是相同的。
结论
在本文中,您了解了如何在Vue应用程序中使用v-for。
如果您想了解有关 Vue.js 的更多信息,请参阅 我们的 Vue.js 主题页面以获取练习和编程项目。