153.md

# 9.渲染列表第 1 部分（遍历数组）

> 原文： [https://javabeginnerstutorial.com/vue-js/9-rendering-lists-part-1/](https://javabeginnerstutorial.com/vue-js/9-rendering-lists-part-1/)

我们日复一日地处理清单。 在我们的应用程序中，我们经常遇到这样的情况，即我们必须将数组显示为列表，其项会动态变化。 因此，在我们的 HTML 中对数组项进行硬编码并不是真正的选择。 重要的是，我们知道如何使用 Vue 处理这些动态变化的数组，这并不奇怪，为此，我们还有另一个指令！ 多田，是对的 v！ 与往常一样，我们将深入研究大量示例，以便于清楚理解。

## 遍历数组

我们面临的最常见和最简单的方案是遍历数组的各项并将它们呈现为列表。 以下是四种不同语言的问候语，我们希望将其显示为网页的无序列表。

```java
data: {
  greetings: ["hi", "bonjour", "hola", "ciao"]
}
```

在我们的`index.html`文件中，让我们将`v-for`指令添加到`<li>`元素中，以动态地呈现 greetings 数组的内容，如下所示：

```java
 <ul>
   <li v-for="greeting in greetings">{{ greeting }}</li>
 </ul>
```

好吧，不要惊慌！ 我将逐字剖析此信息。

我们为`v-for`指令使用的*特殊语法*是“ `greeting in greetings`”。

*   首先， ***问候语*** – 建议在我们的情况下使用单数名词，问候语，作为数组元素的 ***别名*** 反复进行。 这可以是您选择的任何名称，然后可以在我们的代码中使用该名称来寻址每个数组项。
*   其次，作为语法一部分的 – ***定界符*** 中的 ***。 如果您具有 JavaScript 背景，那么所有这些看起来都应该很熟悉，因为在这里我们将`for in`和`for of`用于迭代目的。 即使使用 Vue，我们也可以使用`of`作为分隔符而不是`in`。***

```java
 <li v-for="greeting of greetings">{{ greeting }}</li>
```

*   最后， ***问候*** – 必须与 Vue 实例的`data`对象中的 ***阵列名称*** 完全相同。

在这里，为简单起见，我们在简单插值中使用变量`greeting`。 但它可以像其他任何属性一样使用，例如将其作为值传递给函数或将其绑定到链接的引用等。输出如下，

![v-for iterating over array](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20688%20448'%3E%3C/svg%3E)

<noscript><img alt="v-for iterating over array" class="alignnone size-full wp-image-14104" height="448" sizes="(max-width: 688px) 100vw, 688px" src="img/af9854cb19e36518d9d7c5b0266dc44b.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/1_v-for-array.jpg 688w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/1_v-for-array-300x195.jpg 300w" width="688"/><p>使用小胡子语法的另一种方法是使用<code>v-text</code>指令。 它将<code>greeting</code>设置为文本内容。</p><pre><code class="language-html">&lt;ul&gt; &lt;li v-for="greeting in greetings" v-text=greeting&gt;&lt;/li&gt; &lt;/ul&gt;</code></pre><p>将呈现相同的结果。</p><h2><strong> Vue 是反应性的！ </strong></h2><p><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"> </span> <span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"> <span class="ezoic-ad ezoic-adl" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"> </span> </span>让我们沿着存储通道走一下。 我们了解到 Vue 的美丽在于其<a href="https://javabeginnerstutorial.com/js/vue-js/2-template-syntax-reactivity/">反应性</a>。</p><p><strong> <em>快速回顾：</em> </strong>使状态和视图保持同步。 换句话说，Vue 不仅在引用的 DOM 中将<strong>呈现为</strong>数据，而且无论何时在数据对象中更改其值，<strong>都会更新</strong>。</p><p>让我们再来看一次这种情况。</p><p>使用快捷方式<strong> F12 </strong>打开<em> Chrome DevTools </em>，然后点击“ <strong> Vue </strong>”。 仅当您已遵循我们的教程系列并安装了<a href="https://javabeginnerstutorial.com/vue-js/4-vue-devtools-setup/"> <strong> <em> Vue Devtools </em> </strong> Chrome 扩展</a>后，此面板才会出现。</p><p>由于我们没有使用任何全局变量来引用<code>index.js</code>文件中的 Vue 实例，因此默认情况下会将其保存到<code>$vm0</code>。 如下图所示，单击<code>&lt;Root&gt;</code>即可看到。 因此，让我们使用<code>$vm0</code>从开发者工具控制台访问 Vue 模型。</p><p><img alt="reactivity in vue" class="alignnone size-full wp-image-14105" data-lazy-sizes="(max-width: 372px) 100vw, 372px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_vm0.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_vm0.jpg 372w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_vm0-217x300.jpg 217w" height="514" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20372%20514'%3E%3C/svg%3E" width="372"/></p><noscript><img alt="reactivity in vue" class="alignnone size-full wp-image-14105" height="514" sizes="(max-width: 372px) 100vw, 372px" src="img/7de386b6e2a340c69e8afaf8d06fdc41.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_vm0.jpg 372w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_vm0-217x300.jpg 217w" width="372"/><p>让我们转到控制台，使用<code>push</code>方法向<code>greetings</code>数组添加一个问候，然后查看视图是否进行了动态更新（<em>神奇地</em>！）。</p><pre><code class="language-javascript">$vm0.greetings.push("namaste")</code></pre><p><img alt="v-for reactivity" class="alignnone size-full wp-image-14106" data-lazy-sizes="(max-width: 509px) 100vw, 509px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_reactivity.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_reactivity.jpg 509w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_reactivity-300x242.jpg 300w" height="411" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20509%20411'%3E%3C/svg%3E" width="509"/></p><noscript><img alt="v-for reactivity" class="alignnone size-full wp-image-14106" height="411" sizes="(max-width: 509px) 100vw, 509px" src="img/fbdfc17ee75fab781a7335c339414c87.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_reactivity.jpg 509w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_reactivity-300x242.jpg 300w" width="509"/><p>这不是魔术吗？</p><h2><strong>访问当前数组项的索引</strong></h2><p>开发者的生活没有暂停按钮！ 我们期望完成意外的事情，例如访问数组项的索引及其内容。 我们知道如何使用 Vue 渲染数组元素，但是否也可以获得其索引？ 好吧，答案是肯定的！</p><p>语法与我们之前看到的非常相似，</p><pre><code class="language-html">&lt;div v-for="(greeting, index) in greetings"&gt;{{ index }}. {{ greeting}}&lt;/div&gt;</code></pre><p>我们必须引入一个括号并指定两个用逗号分隔的参数，可以选择它们的名称。 <strong>第一个</strong>参数是指数组元素 – 在我们的例子中是<code>greeting</code>。 <strong>第二个</strong>参数是可选的，它引用当前正在循环的项目的索引 – 在我们的示例中为<code>index</code>。 此<strong>订单</strong>是最重要的注意事项。 无论您使用什么名称，第一个始终是数组元素，第二个始终是 v-for 语法中的索引。 然后可以根据需要将其与代码中的这些名称一起使用。</p><p><img alt="v-for with index" class="alignnone size-full wp-image-14107" data-lazy-sizes="(max-width: 786px) 100vw, 786px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index.jpg 786w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index-300x161.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index-768x413.jpg 768w" height="423" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20786%20423'%3E%3C/svg%3E" width="786"/></p><noscript><img alt="v-for with index" class="alignnone size-full wp-image-14107" height="423" sizes="(max-width: 786px) 100vw, 786px" src="img/e2131f026f63f0feaafc6fd692278f3c.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index.jpg 786w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index-300x161.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index-768x413.jpg 768w" width="786"/><p>让我们看一下最终代码。</p><h3>Index.html</h3><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;h2&gt;Greetings&lt;/h2&gt; &lt;!-- Iterating through array elements--&gt; &lt;ul&gt; &lt;li v-for="greeting in greetings" v-text=greeting&gt;&lt;/li&gt; &lt;/ul&gt; &lt;!-- Accessing array elements along with thier index --&gt; &lt;h2&gt;Greetings with Index&lt;/h2&gt; &lt;div v-for="(greeting, index) in greetings"&gt; {{ index }}. {{ greeting}} &lt;/div&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><h3>Index.js</h3><pre><code class="language-javascript">var app = new Vue({ el: "#app", data: { greetings: ["hi", "bonjour", "hola", "ciao"] } });</code></pre><p><a href="https://github.com/JBTAdmin/vuejs"> GitHub 存储库</a>中也提供了上面讨论的所有代码。 随意分叉存储库并进行一些实验。</p><p>在下一篇文章中，我们将研究如何使用 v-for 遍历对象。 在此之前，请继续练习！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/10-rendering-lists-part-2/" title="10\. Rendering Lists Part 2 (Iterating over objects)"> 10.渲染列表第 2 部分（遍历对象）</a></h5></div></div> </body> </html></noscript>