Une introduction pratique à Vue.js : Comment boucler sur des tableaux et des objets-Voir.js-php.cn

Une introduction pratique à Vue.js : Comment boucler sur des tableaux et des objets

Dans la section précédente (Partie 3 du cours), nous avons appris à utiliser v-if et v-show pour le rendu conditionnel. Dans cette section, nous apprendrons comment effectuer une boucle sur des tableaux et des objets, en plus d'appliquer certains des concepts que nous avons appris précédemment. v-if 和 v-show 进行条件渲染。本节我们将学习如何对数组和对象进行循环，除此之外，我们还将应用之前所学的一些概念。

v-for

v-for 是 Vue 的基本指令之一，一旦你学会如何使用它，你就可以在你的程序中添加更多功能。

简单的来说，v-for 就是一个 for 循环。如果你还不知道什么是 for 循环的话，for 循环其实是一段代码，代码内每一个元素都会被执行一次，而这些元素通常是一个 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>

Copier après la connexion

让我们先创建一个简单的数组，这样我们可以使用循环输出数组里的内容。我们将在 data 对象中创建一个属性，叫做 games。当然，你也可以取一个自己喜欢的名字???。

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

Copier après la connexion

现在我们已经设置好了数组，让我们创建一个简单的 <ul> 标签来显示它。

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

Copier après la connexion

看起来很不错! 现在我们要告诉 Vue，我们要通过循环数组在 <ul> 中输出尽可能多的 <li> 标签。

在其他语言中，你可能已经习惯了这样来循环输出 <li> 标签：

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

Copier après la connexion

将需要循环输出的 <li> 标签包裹在循环中。

但是在 Vue 中，我们可以将 v-for 指令声明在我们要循环的标签上。首先在你的 <li> 标签中做下面这些修改，之后我们再来一步步分析。

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

Copier après la connexion

让我们来详细分析一下：

v-for 指令是直接加在 <li> 标签中，而不是我们前面看到的 <ul> 标签。这样写的原因是： “给我们 games 数组中的每一个 game 都创建一个 <li> 标签。

注意，games 是我们前面在 data 中添加的属性，所以我们要用这个变量名。

game 这个变量（单数）是由我们自己定义的，我们可以用 item、game、title 或者其他我们觉得合适的名称。但是一定要明白，这个 game 是你在循环里面要用的变量。

最后，在我们的 <li> 标签里面，我们要输出 game 变量的内容，所以当我们循环运行的时候，将会依次把 games 数组中的字符串输出到 <li> 标签中。

在浏览器内打开我们的 index.html 文件，你应该会看到 games 数组内的内容被输出到屏幕上。

提升点难度

到目前为止，还算不错吧？ v-for 实际上是一个非常简单的概念，但是这个例子太无聊了。让我们把事情变得更复杂有趣一点，在我们的数组中包含一些对象，并配合着 v-if 使用，怎么样？

首先，我们用一些更有趣的数据来更新我们的 games 属性。

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 }
  ]
},

Copier après la connexion

如果你现在运行我们的程序，它不会出错，但它只会以字符串的格式输出 games 里的对象，这不太美观。事实上，我们要彻底删掉我们的 <ul> 标签，用 <div> 标签来输出我们的信息。(别担心，用了 div 还是会很难看?）

将整个 <div id="app"> 替换成如下内容:

<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>

Copier après la connexion

?. 看到上面一大堆是不是很害怕？不用担心，你只需要了解的是什么，让我们详细分析一下：

div v-for="game in games" 还是老样子，我们要循环 games 数组，并将 games 数组内的每个对象存储在 game

v-for

v-for

for

Array(array)

Object(object)

index.html

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

Copier après la connexion

data

games




  Vue 101



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

    ❤️

    Wow, this game must be REALLY good

Copier après la connexion