# 10.渲染列表第 2 部分（遍历对象）

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

希望您已经知道[使用 v-for 指令遍历数组元素](https://javabeginnerstutorial.com/vue-js/9-rendering-lists-part-1/)。 在我们的应用中，我们处理的对象与数组一样多。 因此，不用费劲，让我们了解如何迭代对象的各种属性。 我听到你说：“*那么对象数组呢？*”我懂了。 我们也会处理这种情况！

## 遍历对象

是时候向我们的 Vue 实例的`data`对象添加一个简单的对象了。

```java
var app = new Vue({
  el: "#app",
  data: {
    greetings: ["hi", "bonjour", "hola", "ciao"],
    letters: {
      a: "apple",
      b: "banana",
      c: "cat"
    }
  }
});
```

为了遍历对象的键值对，我们可以使用相同的`v-for`指令。

### 1.访问对象的值

访问对象的值非常简单。

```java
<div v-for="value in letters"> {{ value }} </div>
```

这种语法与遍历数组值非常相似吗？ 如果我们只想从每个键值对中获取值，那么就足够了。

*   ‘`value`’– 您可以选择任何名称。 使用相同的名称访问每个值。
*   ‘`letters`’– 必须与`data`对象中的对象名称相同。

![Accessing object values](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20661%20413'%3E%3C/svg%3E)

<noscript><img alt="Accessing object values" class="alignnone size-full wp-image-14114" height="413" sizes="(max-width: 661px) 100vw, 661px" src="img/9311d0d7d4efc1a35c0de5c4dd022b0c.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/5_p2_object-values.jpg 661w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/5_p2_object-values-300x187.jpg 300w" width="661"/><h3>2.获得关键和价值</h3><p>如果我们想在<code>v-for</code>语法中使用多个参数，则必须使用括号。 <strong>顺序</strong>在这里很重要。</p><li><strong> <em>第一个</em> </strong> <strong> <em>自变量</em> </strong>将始终是<strong> <em>值</em> </strong>和</li><li><strong> <em>第二个</em> </strong> <strong> <em>自变量</em> </strong>将是<strong> <em>键</em> </strong>。</li><p>参数名称可以是我们选择的任何名称。 为了简单和易于理解，让我们使用<code>value</code>和<code>key</code>作为参数名称。</p><pre><code class="language-html">&lt;div v-for="(value, key) in letters"&gt; {{ key }} for {{ value }} &lt;/div&gt;</code></pre><p><img alt="Object key-value pairs" class="alignnone size-full wp-image-14115" data-lazy-sizes="(max-width: 662px) 100vw, 662px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/6_p2-object-key-values.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/6_p2-object-key-values.jpg 662w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/6_p2-object-key-values-300x147.jpg 300w" height="325" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20662%20325'%3E%3C/svg%3E" width="662"/></p><noscript><img alt="Object key-value pairs" class="alignnone size-full wp-image-14115" height="325" sizes="(max-width: 662px) 100vw, 662px" src="img/93651dbd853e64db98ae820633c75fc4.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/6_p2-object-key-values.jpg 662w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/6_p2-object-key-values-300x147.jpg 300w" width="662"/><h3>3.访问键，值和当前索引</h3><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" 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>第三个自变量 可用于获取<strong> <em>电流指标</em> 正在访问键值对的</strong>。 同样，这些论据的顺序很重要。 第一个参数将始终是值，第二个参数将是键，第三个参数是当前索引。 参数名称可以一如既往地由我们选择。 不要忘记将所有这些参数括在括号中。 为了更好地理解，让我们将“ <strong> k </strong>”用作键，将“ <strong> v </strong>”用作值，将“ <strong> i </strong>”用作当前索引。</p><pre><code class="language-html">&lt;div v-for="(v, k, i) in letters"&gt; {{ k }} for {{ v }} - ({{ i }}) &lt;/div&gt;</code></pre><p><strong> <em>注意：</em> </strong> <em>请注意，这些键值对的显示顺序可能会因浏览器而异。 因为顺序基于 Object.keys（）的结果，该结果返回对象的所有键。 </em></p><p>由于参数名称可以是我们喜欢的任何名称，因此以下代码也提供了相同的结果。</p><pre><code class="language-html">&lt;div v-for="(value, key, index) in letters"&gt; {{ key }} for {{ value }} - ({{ index }}) &lt;/div&gt;</code></pre><p><img alt="" class="alignnone size-full wp-image-14120" data-lazy-sizes="(max-width: 728px) 100vw, 728px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/7_p2-object-key-value-and-index.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/7_p2-object-key-value-and-index.jpg 728w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/7_p2-object-key-value-and-index-300x134.jpg 300w" height="325" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20728%20325'%3E%3C/svg%3E" width="728"/></p><noscript><img alt="" class="alignnone size-full wp-image-14120" height="325" sizes="(max-width: 728px) 100vw, 728px" src="img/4dae526bdbb7281ef3a6bf01311a728e.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/7_p2-object-key-value-and-index.jpg 728w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/7_p2-object-key-value-and-index-300x134.jpg 300w" width="728"/><h2>遍历对象数组</h2><p>假设我们的数据对象中有两个简单对象的数组。</p><pre><code class="language-javascript">movies: [ { character: "Iron man", name: "Avengers" }, { character: "groot", name: "Guardians of the Galaxy" } ]</code></pre><p>为了访问数组中每个对象的值，</p><pre><code class="language-html">&lt;li v-for="movie in movies"&gt; &lt;strong&gt;Movie name:&lt;/strong&gt; {{ movie.name }} and &lt;br/&gt; &lt;strong&gt;Character:&lt;/strong&gt; {{ movie.character }} &lt;/li&gt;</code></pre><li><code>movie in movies</code> – 从<code>movie</code>变量中的<code>movies</code>数组中获取每个对象</li><li><code>movie.name</code>和<code>movie.character</code> – 从当前正在循环的单个对象中分别获取键<code>name</code>和<code>character</code>的值，并将其保存在“ <code>movie</code>”变量中。</li><p>请记住，如果您不想使用点运算符或动态呈现键值对，则可以嵌套另一个<code>v-for</code>指令。 当然，您可以在其中嵌套任意数量的<code>v-for</code>指令。</p><p>因此，使用点运算符的替代代码是</p><pre><code class="language-html">&lt;li v-for="movie in movies"&gt; &lt;div v-for="(value, key) in movie"&gt; {{ key }}: {{ value }} &lt;/div&gt; &lt;/li&gt;</code></pre><p><img alt="array of objects" class="alignnone size-full wp-image-14117" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/8_p2-array-of-objects-1.jpg" height="325" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20421%20325'%3E%3C/svg%3E" width="421"/></p><noscript><img alt="array of objects" class="alignnone size-full wp-image-14117" height="325" src="img/48390ba271d7b2e63d17182f3268dabe.png" width="421"/><h2>跟踪独特的“关键”属性</h2><p>在处理简单列表时，我们可以像到目前为止讨论的那样使用<code>v-for</code>指令。 但是在处理子组件（我们将在本系列教程的后面部分介绍），更新列表元素等过程中，您可能会遇到一些意外行为。为避免在编码时遇到此类颠簸，始终建议提供<strong>唯一值 </strong>并将其绑定到特殊的<code>key</code>属性，如下所示，</p><pre><code class="language-html">&lt;li v-for="movie in movies" v-bind:key="movie.name"&gt;</code></pre><p>希望电影的名称是唯一的。 这将有助于 Vue 跟踪每个节点的身份。</p><h2>遍历一个范围</h2><p>如果遇到仅打印从<strong> 1 </strong>到某些<strong>固定</strong> <strong>整数</strong>的数字的情况，那么再次说，这只是 Vue 的<code>v-for</code>指令。</p><p>例如，</p><pre><code class="language-html">&lt;span v-for="num in 3"&gt;</code></pre><li><em> num </em> – 您选择的任何变量名称，它将在给定范围内循环时代表当前数字</li><li>中的<em> – 分隔符（根据语法）</em></li><li><em> 3 </em> – 范围，表示循环时要考虑的最后一个数字。</li><p>假设我们要打印 5 到 1 到 3 之间的数字。 按照上面的示例很容易，</p><pre><code class="language-html">&lt;div v-for="number in 5"&gt; &lt;strong&gt;{{ number }}. &lt;/strong&gt; &lt;span v-for="num in 3"&gt; {{ num }} &lt;/span&gt; &amp;nbsp; &lt;/div&gt;</code></pre><p>外部<code>v-for</code>跟踪<code>&lt;div&gt;</code>标签内的代码重复的次数，内部<code>v-for</code>生成 1 到 3 的整数范围。</p><p><img alt="Printing numbers" class="alignnone size-full wp-image-14118" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/9_p2-numbers.jpg" height="294" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20564%20294'%3E%3C/svg%3E" width="564"/></p><noscript><img alt="Printing numbers" class="alignnone size-full wp-image-14118" height="294" src="img/d89ceb6b0d908e7fe203b4f9a5f891a1.png" width="564"/><p>让我们只看完整的代码，而不是看看各个片段。</p><p><em> <strong> index.html </strong> </em></p><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;hr/&gt; &lt;!-- Iterating through objects --&gt; &lt;h2&gt;Object values&lt;/h2&gt; &lt;div v-for="value in letters"&gt;{{ value }}&lt;/div&gt; &lt;hr/&gt; &lt;h2&gt;Object key-value pairs&lt;/h2&gt; &lt;div v-for="(value, key) in letters"&gt; {{ key }} for {{ value }} &lt;/div&gt; &lt;hr/&gt; &lt;h2&gt;Object key-value and index&lt;/h2&gt; &lt;div v-for="(value, key, index) in letters"&gt; {{ key }} for {{ value }} - ({{ index }}) &lt;/div&gt; &lt;hr/&gt; &lt;!-- Iterating over an array of objects --&gt; &lt;ul&gt; &lt;li v-for="movie in movies" v-bind:key="movie.name"&gt; &lt;strong&gt;Movie name:&lt;/strong&gt; {{ movie.name }} and &lt;br/&gt; &lt;strong&gt;Character:&lt;/strong&gt; {{ movie.character }} &lt;/li&gt; &lt;/ul&gt; &lt;!-- Alternative method --&gt; &lt;h4&gt; Aliter &lt;/h4&gt; &lt;ul&gt; &lt;li v-for="movie in movies"&gt; &lt;div v-for="(value, key) in movie"&gt; {{ key }}: {{ value }} &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;hr/&gt; &lt;!-- Iterating over numbers --&gt; &lt;div v-for="number in 5"&gt; &lt;strong&gt; {{ number }}. &lt;/strong&gt; &lt;span v-for="num in 3"&gt; {{ num }} &lt;/span&gt; &amp;nbsp; &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><p><em> <strong> index.js </strong> </em></p><pre><code class="language-java">var app = new Vue({ el: "#app", data: { greetings: ["hi", "bonjour", "hola", "ciao"], letters: { a: "apple", b: "banana", c: "cat" }, movies: [ { character: "Iron man", name: "Avengers" }, { character: "groot", name: "Guardians of the Galaxy" } ] } });</code></pre><p><a href="https://github.com/JBTAdmin/vuejs"> GitHub 存储库</a>中也提供了上面讨论的所有代码。</p><p>故事的寓意，<code>v-for</code> – 一个统治所有人的指令！ ？</p><p>祝你有个美好的一天。</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/11-listening-to-dom-events-and-event-modifiers/" title="11\. Listening to DOM events and Event modifiers"> 11.侦听 DOM 事件和事件修饰符</a></h5></div></div> </body> </html></noscript>