Vue.js の実践的な入門: 配列とオブジェクトをループする方法
前のセクション (コース パート 3) では、v-if と v - の使用方法を学びました。 show 条件付きレンダリングを実行します。このセクションでは、以前に学んだ概念のいくつかを適用することに加えて、配列とオブジェクトをループする方法を学びます。
v-for
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>詳しく分析してみましょう:
- <li>
v-for コマンドは <li>## に直接追加されます。 # タグは、前に見た <ul> タグの代わりに使用します。これを書く理由は次のとおりです。「games 配列内の game ごとに <li> タグを作成します。
games は、先ほど data で追加した属性であるため、この変数名を使用する必要があることに注意してください。 #game この変数 (単数形) は自分たちで定義されています。
、title、または適切と思われるその他のものを使用できます。ただし、この game はループ内で使用する変数であることを理解する必要があります。最後に、<li> で、 タグでは、
配列内の文字列が < ; に出力されます。 li> tag.index.html ファイルをブラウザで開くと、
難易度を上げる ここまではうまくいきましたね?
これは実際には非常に単純な概念です, しかし、この例は退屈すぎます。配列にいくつかのオブジェクトを含めて v-if を使用して、物事をもう少し複雑で興味深いものにしてみましょう。どうですか?
まず、更新しましょうgames プロパティにさらに興味深いデータが含まれています。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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>ゲーム
変数。 看看 嵌套的 最后是 <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 ？
如果你发现写了一大堆 <div> 标签只是为了用 v-for 循环，那么可以使用 <template> </ template> 这个特殊的 HTML 标签帮助你解决这个问题。
现在将带有 v-for 指令的 <div> 标签改成 <template> 标签，然后打开你的开发者控制台，你会发现 <h1> 和 <span> 标签没有被任何东西包裹。
<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 的文档非常出色，文档团队在保持更新和清晰性方面做了很多努力并且通过代码示例把每个部分都解释的非常清楚。
最终代码
以防万一，这是最终的代码：
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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1672
14
1428
52
1332
25
1276
29
1256
24
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
VUEのボタンに関数を追加する方法
Apr 08, 2025 am 08:51 AM
HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。
VueでWatchの使用方法
Apr 07, 2025 pm 11:36 PM
Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。
Vueによる前のページに戻る方法
Apr 07, 2025 pm 11:30 PM
vue.jsには、前のページに戻る4つの方法があります。$ router.go（-1）$ router.back（）outes＆lt; router-link to =＆quot;/＆quot; Component Window.history.back（）、およびメソッド選択はシーンに依存します。
Vue Multi-Page開発とはどういう意味ですか？
Apr 07, 2025 pm 11:57 PM
VUEマルチページ開発は、VUE.JSフレームワークを使用してアプリケーションを構築する方法です。アプリケーションは別々のページに分割されます。コードメンテナンス：アプリケーションを複数のページに分割すると、コードの管理とメンテナンスが容易になります。モジュール性：各ページは、簡単に再利用および交換するための別のモジュールとして使用できます。簡単なルーティング：ページ間のナビゲーションは、単純なルーティング構成を介して管理できます。 SEOの最適化：各ページには独自のURLがあり、SEOに役立ちます。
React vs. Vue：Netflixはどのフレームワークを使用していますか？
Apr 14, 2025 am 12:19 AM
netflixusesaCustomframeworkは、「ギボン」ビルトンリアクト、notreactorvuedirectly.1）チームエクスペリエンス：seice basedonfamperivity.2）projectomplerprojects：vueforsplerprojects、racefforcomplexones.3）customeforsneeds：reactofforsmorefloficailie.
VUEトラバーサルの使用方法
Apr 07, 2025 pm 11:48 PM
Vue.jsには配列とオブジェクトを通過するには3つの一般的な方法があります。V-Forディレクティブは、各要素をトラバースしてテンプレートをレンダリングするために使用されます。 V-BindディレクティブをV-Forで使用して、各要素の属性値を動的に設定できます。 .mapメソッドは、配列要素を新しい配列に変換できます。
vue.jsでJSファイルを参照する方法
Apr 07, 2025 pm 11:27 PM
vue.jsでJSファイルを参照するには3つの方法があります。タグ;; mounted（）ライフサイクルフックを使用した動的インポート。 Vuex State Management Libraryを介してインポートします。
