前のセクション (コース パート 3) では、v-if
と v - の使用方法を学びました。 show
条件付きレンダリングを実行します。このセクションでは、以前に学んだ概念のいくつかを適用することに加えて、配列とオブジェクトをループする方法を学びます。
v-for
は Vue の基本的な命令の 1 つであり、使い方を学べば、次のように追加できます。プログラムにさらに多くの機能を追加します。
簡単に言えば、v-for
は for
ループです。 for
ループが何なのかまだわからない場合は、for
ループは実際にはコードの一部です。コード内の各要素は 1 回実行され、通常、これらの要素はArray (配列)
または Object(オブジェクト)
。
今日は、私たちが行うことすべてに明確な目的があるように、最初から始めます。以下は、index.html
ファイルの基本構造です。これをコピーしてエディターに貼り付けることができます。
<html> <head> <title>Vue 101</title> </head> <body> <div id="app"> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { }, methods: { } }); </script> </body> </html>
まず単純な配列を作成して、ループを使用して配列の内容を出力できるようにしましょう。 data
オブジェクトに games というプロパティを作成します。もちろん、お好きな名前を付けることも可能です???。
data: { games: [ 'Super Mario 64', 'The Legend of Zelda Ocarina of Time', 'Secret of Mana', 'Super Metroid' ] },
配列を設定したので、それを表示するための単純な <ul>
タグを作成しましょう。
<div id="app"> <ul> <li>Game title here</li> </ul> </div>
いいですね! ここで、<ul>
内でできるだけ多くの <li>
を出力したいことを Vue に伝える必要があります。配列ラベル。
他の言語では、このように出力をループすることに慣れているかもしれません<li>
タグ:
<?php foreach ($game in $games): ?> <li><?php echo $game; ?></li> <?php endforeach; ?>
出力をループする必要があります< ;li> ;
タグはループ内にラップされます。
しかし、Vue では、ループしたいラベル上で v-for
ディレクティブを宣言できます。まず、<li>
タグに次の変更を加えてから、段階的に分析していきます。
<ul> <li v-for="game in games">{{ game }}</li> </ul>
詳しく分析してみましょう:
v-for
コマンドは <li>## に直接追加されます。 # タグは、前に見た
<ul> タグの代わりに使用します。これを書く理由は次のとおりです。「
games 配列内の
game ごとに
<li> タグを作成します。
games は、先ほど
data で追加した属性であるため、この変数名を使用する必要があることに注意してください。 #game
この変数 (単数形) は自分たちで定義されています。
、title
、または適切と思われるその他のものを使用できます。ただし、この game
はループ内で使用する変数であることを理解する必要があります。最後に、<li> で、 タグでは、
配列内の文字列が < ; に出力されます。 li>
tag.index.html
ファイルをブラウザで開くと、
難易度を上げる
ここまではうまくいきましたね?
まず、更新しましょうgames
プロパティにさらに興味深いデータが含まれています。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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 }
]
},</pre><div class="contentsignin">ログイン後にコピー</div></div>
今プログラムを実行しても問題は起こりませんが、
<ul> タグを完全に削除し、
<div>
全体を置き換えます
<div id="app"> <div v-for="game in games"> <h1>{{ 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変数。 看看 嵌套的 最后是 <li>
<h1>
标签. 因为 game
是一个对象,而这个对象里又有自己的 name、console 和rating 属性。在 <h1>
里面,我们要输出 game
内的 game.name
和 game.console
。正如你现在所看到的那样,v-for
并不像我们之前只输出 <li>
标签,实际上你可以根据你的需要输出不同的 HTML 标签。v-for
。在 span
标签里面,我们有一个嵌套的 v-for
循环(这完全是可以的),只是有点不同,在这里我们没有循环数组或对象。而是循环了一个数值(在本例中是 game.rating
,循环将根据 game.rating
的值开始计数,然后输出对应数量的❤️。很简单吧?)v-if
。我们要在循环中输出一个 <div>
标签,只有当前 game.rating
的值大于 5 时,才会输出一个<div>
标签。
来吧,在浏览器中继续运行我们的 index.html
文件。
如果你发现写了一大堆 <div>
标签只是为了用 v-for
循环,那么可以使用 <template> </ template>
这个特殊的 HTML 标签帮助你解决这个问题。
现在将带有 v-for
指令的 <div>
标签改成 <template>
标签,然后打开你的开发者控制台,你会发现 <h1>
和 <span>
标签没有被任何东西包裹。
<template>
很特别,因为 Vue 会把它当作一个只用来封装的标签,当我们执行的时候,它不会被渲染到 HTML 中,所以你可以安全地用它来封装一堆其他元素,而不影响你整体的 HTML 结构。
最后一件事::key
属性。我特意留到了最后来讲解。
当你用 v-for
循环时,Vue 不知道如何追踪每个元素,因为它不能将对象区别开来。这意味着 Vue 将重新渲染循环创建的整个部分。在我们的例子中,v-for
只是一个很小的部分,性能损失很小,但这些你应该牢记住。
现在,我们该如何使用它呢?
:key
接收字符串或数字来 “命名” 或 “追踪” 这个元素,所以我们需要给它一个唯一的标识符。对于我们的 games
来说,很简单,我们可以这样做:
<div v-for="game in games" :key="game.name">
我很确定,我们不会在这个列表中出现两次相同的 game
对象,所以这是相当安全的。如果你有来自数据库的数据,一个唯一的 id 在这里使用也很好。
如果你对 :key
的原理很好奇,你可以看看文档 Key的文档
既然你已经了解了这么多,我就再强调下文档的重要性。 Vue 的文档非常出色,文档团队在保持更新和清晰性方面做了很多努力并且通过代码示例把每个部分都解释的非常清楚。
以防万一,这是最终的代码:
Vue 101 <div v-for="game in games" :key="game.name"> <h1>{{ game.name }} - {{ game.console }} ❤️Wow, this game must be REALLY good
请在 <span>
标签中添加一个 @click
事件,使它每次点击就会增加一个❤️。
提示: 你需要将正在循环的 game
对象传递给点击方法。
原文地址:https://dev.to/marinamosti/hands-on-vuejs-for-beginners-part-4-324l
译文地址:https://www.php.cn/link/5a13fe4ac11f3e35f4b9f0a99cf504c0
以上がVue.js の実践的な入門: 配列とオブジェクトをループする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。