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

    希望您已经知道。 在我们的应用中，我们处理的对象与数组一样多。 因此，不用费劲，让我们了解如何迭代对象的各种属性。 我听到你说：“那么对象数组呢？”我懂了。 我们也会处理这种情况！

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

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

    访问对象的值非常简单。

    1. <div v-for="value in letters"> {{ value }} </div>

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

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

    如果我们想在v-for语法中使用多个参数，则必须使用括号。 顺序在这里很重要。

    • 第一个自变量将始终是值
    • 第二个自变量将是键。

    参数名称可以是我们选择的任何名称。 为了简单和易于理解，让我们使用value和key作为参数名称。

    1. <div v-for="(value, key) in letters"> {{ key }} for {{ value }} </div>

    1. <div v-for="(v, k, i) in letters"> {{ k }} for {{ v }} - ({{ i }}) </div>

    注意： 请注意，这些键值对的显示顺序可能会因浏览器而异。 因为顺序基于Object.keys()的结果，该结果返回对象的所有键。

    由于参数名称可以是我们喜欢的任何名称，因此以下代码也提供了相同的结果。

    假设我们的数据对象中有两个简单对象的数组。

    1. movies: [ 
    2.     { character: "Iron man", name: "Avengers" }, 
    3.     { character: "groot", name: "Guardians of the Galaxy" } 
    4. ]

    为了访问数组中每个对象的值，

    1. <li v-for="movie in movies"> 
    2.   <strong>Movie name:</strong> {{ movie.name }} and <br/> 
    3.   <strong>Character:</strong> {{ movie.character }} 
    4. </li>
    • movie in movies – 从movie变量中的movies数组中获取每个对象
    • movie.name和movie.character – 从当前正在循环的单个对象中分别获取键name和character的值，并将其保存在“movie”变量中。

    请记住，如果您不想使用点运算符或动态呈现键值对，则可以嵌套另一个v-for指令。 当然，您可以在其中嵌套任意数量的v-for指令。

    因此，使用点运算符的替代代码是

    1. <li v-for="movie in movies"> 
    2.   <div v-for="(value, key) in movie"> 
    3.     {{ key }}: {{ value }} 
    4.   </div> 
    5. </li>

    在处理简单列表时，我们可以像到目前为止讨论的那样使用指令。 但是在处理子组件（我们将在本系列教程的后面部分介绍），更新列表元素等过程中，您可能会遇到一些意外行为。为避免在编码时遇到此类颠簸，始终建议提供唯一值并将其绑定到特殊的key属性，如下所示，

    如果遇到仅打印从 1 到某些固定整数的数字的情况，那么再次说，这只是 Vue 的v-for指令。

    例如，

    1. <span v-for="num in 3">
    • num – 您选择的任何变量名称，它将在给定范围内循环时代表当前数字
    • in – 分隔符（根据语法）

    假设我们要打印 5 到 1 到 3 之间的数字。 按照上面的示例很容易，

    1. <div v-for="number in 5"> 
    2.   <strong>{{ number }}. </strong> 
    3.   <span v-for="num in 3"> {{ num }} </span> &nbsp; 
    4. </div>

    外部v-for跟踪<div>标签内的代码重复的次数，内部v-for生成 1 到 3 的整数范围。

    让我们只看完整的代码，而不是看看各个片段。

    index.html

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <title>Hello Vue!</title>
    5.     <!-- including Vue with development version CDN -->
    6.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    7.   </head>
    8.   <body>
    9.     <div id="app">
    10.       <h2>Greetings</h2>
    11.       <!-- Iterating through array elements -->
    12.       <ul>
    13.         <li v-for="greeting in greetings" v-text=greeting></li>
    14.       </ul>
    15.       <!-- Accessing array elements along with thier index -->
    16.       <h2>Greetings with Index</h2>
    17.       <div v-for="(greeting, index) in greetings">
    18.           {{ index }}. {{ greeting}}
    19.       </div>
    20.       <hr/>
    21.       <!-- Iterating through objects -->
    22.       <h2>Object values</h2>
    23.       <div v-for="value in letters">{{ value }}</div>
    24.       <hr/>
    25.       <h2>Object key-value pairs</h2>
    27.         {{ key }} for {{ value }}
    28.       </div>
    29.       <h2>Object key-value and index</h2>
    30.       <div v-for="(value, key, index) in letters">
    31.         {{ key }} for {{ value }} - ({{ index }})
    32.       </div>
    33.       <hr/>
    34.       <!-- Iterating over an array of objects -->
    35.       <ul>
    36.         <li v-for="movie in movies" v-bind:key="movie.name">
    37.           <strong>Movie name:</strong> {{ movie.name }} and <br/>
    38.           <strong>Character:</strong> {{ movie.character }}
    39.         </li>
    40.       </ul>
    41.       <!-- Alternative method -->
    42.       <h4> Aliter </h4>
    43.       <ul>
    44.         <li v-for="movie in movies">
    45.           <div v-for="(value, key) in movie">
    46.             {{ key }}: {{ value }}
    47.           </div>
    48.         </li>
    49.       </ul>
    50.       <hr/>
    51.       <!-- Iterating over numbers -->
    52.       <div v-for="number in 5">
    53.         <strong> {{ number }}. </strong>
    54.         <span v-for="num in 3"> {{ num }} </span> 
    55.         &nbsp;
    56.       </div>
    57.     </div>
    58.     <!-- including index.js file -->
    59.     <script src="index.js"></script>
    60.   </body>

    index.js

    中也提供了上面讨论的所有代码。

    祝你有个美好的一天。