10 渲染列表第 2 部分(遍历对象)

原文: https://javabeginnerstutorial.com/vue-js/10-rendering-lists-part-2/

希望您已经知道使用v-for指令遍历数组元素。 在我们的应用中,我们处理的对象与数组一样多。 因此,不用费劲,让我们了解如何迭代对象的各种属性。 我听到你说:“那么对象数组呢?”我懂了。 我们也会处理这种情况!

遍历对象

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

  1. var app =newVue({
  2. el:"#app",
  3. data:{
  4. greetings:["hi","bonjour","hola","ciao"],
  5. letters:{
  6. a:"apple",
  7. b:"banana",
  8. c:"cat"
  9. }
  10. }
  11. });

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

1. 访问对象的值

访问对象的值非常简单。

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

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

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

Accessing object values

2. 获得键和值

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

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

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

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

Object key-value pairs

3. 访问键,值和当前索引

第三个自变量可用于获取正在访问键值对的当前指标。 同样,这些论据的顺序很重要。 第一个参数将始终是值,第二个参数将是键,第三个参数是当前索引。 参数名称可以一如既往地由我们选择。 不要忘记将所有这些参数括在括号中。 为了更好地理解,让我们将“k”用作键,将“v”用作值,将“i”用作当前索引。

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

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

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

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

10 渲染列表第 2 部分(遍历对象) - 图3

遍历对象数组

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

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

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

  1. <liv-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.namemovie.character – 从当前正在循环的单个对象中分别获取键namecharacter的值,并将其保存在“movie”变量中。

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

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

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

array of objects

跟踪独特的“键”属性

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

  1. <liv-for="movie in movies"v-bind:key="movie.name">

希望电影的名称是唯一的。 这将有助于 Vue 跟踪每个节点的身份。

遍历一个范围

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

例如,

  1. <spanv-for="num in 3">
  • num – 您选择的任何变量名称,它将在给定范围内循环时代表当前数字
  • in – 分隔符(根据语法)
  • 3 – 范围,表示循环时要考虑的最后一个数字。

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

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

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

Printing numbers

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

index.html

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

index.js

  1. var app =newVue({
  2. el:"#app",
  3. data:{
  4. greetings:["hi","bonjour","hola","ciao"],
  5. letters:{
  6. a:"apple",
  7. b:"banana",
  8. c:"cat"
  9. },
  10. movies:[
  11. { character:"Iron man", name:"Avengers"},
  12. { character:"groot", name:"Guardians of the Galaxy"}
  13. ]
  14. }
  15. });

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

故事的寓意,v-for – 一个统治所有人的指令! ?

祝你有个美好的一天。