Vue.js の実践的な入門: 配列とオブジェクトをループする方法

前のセクション (コース パート 3) では、v-if と v - の使用方法を学びました。 show 条件付きレンダリングを実行します。このセクションでは、以前に学んだ概念のいくつかを適用することに加えて、配列とオブジェクトをループする方法を学びます。

v-for

v-for は Vue の基本的な命令の 1 つであり、使い方を学べば、次のように追加できます。プログラムにさらに多くの機能を追加します。

簡単に言えば、v-for は for ループです。 for ループが何なのかまだわからない場合は、for ループは実際にはコードの一部です。コード内の各要素は 1 回実行され、通常、これらの要素はArray (配列) または Object(オブジェクト)。

今日は、私たちが行うことすべてに明確な目的があるように、最初から始めます。以下は、index.html ファイルの基本構造です。これをコピーしてエディターに貼り付けることができます。

  <title>Vue 101</title>



  <div>

  </div>

  <script></script>

  <script>
    const app = new Vue({
      el: &#39;#app&#39;,
      data: {

      },
      methods: {

      }
    });
  </script>

まず単純な配列を作成して、ループを使用して配列の内容を出力できるようにしましょう。 data オブジェクトに games というプロパティを作成します。もちろん、お好きな名前を付けることも可能です???。

data: {
  games: [
    'Super Mario 64',
    'The Legend of Zelda Ocarina of Time',
    'Secret of Mana',
    'Super Metroid'
  ]
},

配列を設定したので、それを表示するための単純な <ul></ul> タグを作成しましょう。

<div id="app">
  <ul>
    <li>Game title here</li>
  </ul>
</div>

いいですね! ここで、<ul></ul> 内でできるだけ多くの <li> を出力したいことを Vue に伝える必要があります。配列ラベル。

他の言語では、このように出力をループすることに慣れているかもしれません<li>タグ:

<?php foreach ($game in $games): ?>
  <li><?php echo $game; ?></li>
<?php endforeach; ?>

出力をループする必要があります&lt ;li&gt ; タグはループ内にラップされます。

しかし、Vue では、ループしたいラベル上で v-for ディレクティブを宣言できます。まず、<li> タグに次の変更を加えてから、段階的に分析していきます。

<ul>
  <li v-for="game in games">{{ game }}</li>
</ul>

詳しく分析してみましょう:

<li>

v-for コマンドは <li>## に直接追加されます。 # タグは、前に見た

タグの代わりに使用します。これを書く理由は次のとおりです。「games 配列内の game ごとに <li> タグを作成します。 <li>

games は、先ほど data で追加した属性であるため、この変数名を使用する必要があることに注意してください。 #game この変数 (単数形) は自分たちで定義されています。

item、<li>game

、title、または適切と思われるその他のものを使用できます。ただし、この game はループ内で使用する変数であることを理解する必要があります。最後に、<li> で、 タグでは、

game 変数の内容を出力したいので、ループを実行すると、<li>games

配列内の文字列が &lt ; に出力されます。 li> tag.index.html ファイルをブラウザで開くと、

games 配列の内容が表示されます。

難易度を上げる ここまではうまくいきましたね?

v-for

これは実際には非常に単純な概念です, しかし、この例は退屈すぎます。配列にいくつかのオブジェクトを含めて v-if を使用して、物事をもう少し複雑で興味深いものにしてみましょう。どうですか?

まず、更新しましょうgames プロパティにさらに興味深いデータが含まれています。<pre class='brush:php;toolbar:false;'>data: { games: [ { name: &amp;#39;Super Mario 64&amp;#39;, console: &amp;#39;Nintendo 64&amp;#39;, rating: 4 }, { name: &amp;#39;The Legend of Zelda Ocarina of Time&amp;#39;, console: &amp;#39;Nintendo 64&amp;#39;, rating: 5 }, { name: &amp;#39;Secret of Mana&amp;#39;, console: &amp;#39;Super Nintendo&amp;#39;, rating: 4 }, { name: &amp;#39;Fallout 76&amp;#39;, console: &amp;#39;Multiple&amp;#39;, rating: 1 }, { name: &amp;#39;Super Metroid&amp;#39;, console: &amp;#39;Super Nintendo&amp;#39;, rating: 6 } ] },</pre> 今プログラムを実行しても問題は起こりませんが、

games## 内のオブジェクトのみが出力されます。 # 文字列形式ですが、あまり美しくありません。実際、情報を出力するには、
タグを完全に削除し、
タグを使用する必要があります。(心配しないでください。div を使用しても見苦しくなりますか?)

全体を置き換えます

次の内容に置き換えます:

<div id="app">
  <div v-for="game in games">
    <h1 id="nbsp-game-name-nbsp-nbsp-nbsp-small-nbsp-game-console-nbsp-small">{{ game.name }} - <small>{{ game.console }}</small></h1>

    <span v-for="star in game.rating">❤️</span>

    <div v-if="game.rating > 5">Wow, this game must be <b>REALLY</b> good</div>
  </div>
</div>

?. 上記のようなことをたくさん見ると怖くなりますか? 心配しないで、それが何であるかを知る必要があるだけです。詳しく分析しましょう:

#div v-for="game in games" 同じように、

games

配列をループし、

games

配列を変換する必要があります。内部の各オブジェクトは次の場所に保存されます。 <li>ゲーム

変数。

<li>

看看 <h1></h1> 标签. 因为 game 是一个对象，而这个对象里又有自己的 name、console 和rating 属性。在 <h1></h1> 里面，我们要输出 game 内的 game.name 和 game.console。正如你现在所看到的那样，v-for 并不像我们之前只输出 <li> 标签，实际上你可以根据你的需要输出不同的 HTML 标签。

<li>

嵌套的 v-for。在 span 标签里面，我们有一个嵌套的 v-for 循环(这完全是可以的)，只是有点不同，在这里我们没有循环数组或对象。而是循环了一个数值（在本例中是 game.rating，循环将根据 game.rating 的值开始计数，然后输出对应数量的❤️。很简单吧？)

<li>

最后是 v-if。我们要在循环中输出一个 <div> 标签，只有当前 <code>game.rating 的值大于 5 时，才会输出一个<div>标签。<p>来吧，在浏览器中继续运行我们的 <code>index.html 文件。

每次循环时可不可以不使用 DIV ？

如果你发现写了一大堆 <div> 标签只是为了用 <code>v-for 循环，那么可以使用 <template> template></template> 这个特殊的 HTML 标签帮助你解决这个问题。

现在将带有 v-for 指令的 <div> 标签改成 <code><template></template> 标签，然后打开你的开发者控制台，你会发现 <h1></h1> 和 <span></span> 标签没有被任何东西包裹。



<template></template> 很特别，因为 Vue 会把它当作一个只用来封装的标签，当我们执行的时候，它不会被渲染到 HTML 中，所以你可以安全地用它来封装一堆其他元素，而不影响你整体的 HTML 结构。

:key 属性

最后一件事：:key属性。我特意留到了最后来讲解。

当你用 v-for 循环时，Vue 不知道如何追踪每个元素，因为它不能将对象区别开来。这意味着 Vue 将重新渲染循环创建的整个部分。在我们的例子中，v-for 只是一个很小的部分，性能损失很小，但这些你应该牢记住。

现在，我们该如何使用它呢？

:key 接收字符串或数字来 “命名” 或 “追踪” 这个元素，所以我们需要给它一个唯一的标识符。对于我们的 games 来说，很简单，我们可以这样做：

<div v-for="game in games" :key="game.name">

我很确定，我们不会在这个列表中出现两次相同的 game 对象，所以这是相当安全的。如果你有来自数据库的数据，一个唯一的 id 在这里使用也很好。

如果你对 :key 的原理很好奇，你可以看看文档 Key的文档

既然你已经了解了这么多，我就再强调下文档的重要性。 Vue 的文档非常出色，文档团队在保持更新和清晰性方面做了很多努力并且通过代码示例把每个部分都解释的非常清楚。

最终代码

以防万一，这是最终的代码：

  




  <div v-for="game in games" :key="game.name">
    
{{ game.name }} - {{ game.console }}

    ❤️

    
Wow, this game must be REALLY good
  

<script> const app = new Vue({ el: &#39;#app&#39;, data: { games: [ { name: &#39;Super Mario 64&#39;, console: &#39;Nintendo 64&#39;, rating: 4 }, { name: &#39;The Legend of Zelda Ocarina of Time&#39;, console: &#39;Nintendo 64&#39;, rating: 5 }, { name: &#39;Secret of Mana&#39;, console: &#39;Super Nintendo&#39;, rating: 4 }, { name: &#39;Fallout 76&#39;, console: &#39;Multiple&#39;, rating: 1 }, { name: &#39;Super Metroid&#39;, console: &#39;Super Nintendo&#39;, rating: 6 } ] } }); </script>

小测验

请在 <span></span> 标签中添加一个 @click 事件，使它每次点击就会增加一个❤️。

提示: 你需要将正在循环的 game 对象传递给点击方法。

原文地址：https://dev.to/marinamosti/hands-on-vuejs-for-beginners-part-4-324l

译文地址：https://www.php.cn/link/5a13fe4ac11f3e35f4b9f0a99cf504c0

（学习视频分享：web前端开发、编程基础视频）