V

Vue.js 初学者入门（第四部分）v-for 更上一层楼 如果我不需要包裹 DIV 怎么办？:key 属性 最终代码挑战

2025-06-07

初学者 Vue.js 实践（第 4 部分）

v-for

更上一层楼

如果我不需要包装 DIV 怎么办？

:key 属性

最终代码

挑战

欢迎回来！🤩

上次我们学习了如何使用v-if和 进行条件渲染v-show。这次我们将学习如何循环遍历数组和对象，并为其中的每个元素创建一个元素。我们还会运用之前学过的一些概念。

v-for

v-for是Vue.js的基本指令之一，一旦您了解了它的工作原理，您在应用程序内构建的内容的扩展将呈指数级增长。

v-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>
Enter fullscreen mode Exit fullscreen mode

让我们先创建一个简单的列表（一个数组），然后循环输出其内容。我们将在data对象内部创建一个名为games的属性。您可以随意将标题更改为您个人喜欢的游戏 🙃🎮

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

太棒了！现在数组已经设置好了，接下来我们来创建一个简单易懂的<ul>元素来显示它。为了方便举例，我们先保持简单。

<div id="app">
  <ul>
    <li>Game title here</li>
  </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

好的，看起来不错！现在我们必须告诉Vue，我们想要输出尽可能多的<li>元素，<ul>以便循环遍历整个数组。

在其他语言中，甚至是原始 JavaScript 中，您可能习惯于做类似这样的事情：

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

循环包含要输出或打印出来的元素。

在Vue中，我们将指令v-for声明在要循环的元素顶部。请对您的代码进行以下更改<li>，之后我们会进行详细分析。

<ul>
  <li v-for="game in games">{{ game }}</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

让我们来看看。

  1. v-for直接添加到了<li>，而不是<ul>我们之前看到的 。内容如下：“对于数组game中的每个元素，请在这些标签内games创建一个新的元素。”<li><ul>
  2. 请注意，这games是我们之前在数组中添加的属性data，因此我们必须使用这个变量名。
  3. 变量game（单数）由我们定义，可以使用item、game或title任何我们喜欢的符号。但请务必理解，这*game* in games就是你在循环中将用作变量的内容。
  4. 最后，在我们的<li>标签内，我们输出变量的内容game，因此当循环为每个游戏运行时，这会将字符串输出到<li>.

在浏览器中运行您的应用程序，您应该会看到您的项目列表输出到屏幕上。

更上一层楼

到目前为止，一切都还好吗？v-for这其实是一个非常简单的概念，而且这个例子也超级无聊。那么，我们来让事情变得稍微复杂一点怎么样？让我们的数组包含一些对象，并v-if在列表中应用一些 s 。

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

data: {
  games: [
    { name: 'Super Mario 64', console: 'Nintendo 64', rating: 4 },
    { name: 'The Legend of Zelda Ocarina of Time', console: 'Nintendo 64', rating: 5 },
    { name: 'Secret of Mana', console: 'Super Nintendo', rating: 4 },
    { name: 'Fallout 76', console: 'Multiple', rating: 1 },
    { name: 'Super Metroid', console: 'Super Nintendo', rating: 6 }
  ]
},
Enter fullscreen mode Exit fullscreen mode

一如既往，请随意使用您喜欢的游戏。附言：《超级银河战士》的 6 分并非笔误，只是它真的太好玩了——而且我有点偏见。😬 另外，Bethesda，你应该感到羞耻。咳咳，总之。

如果你此时运行你的应用，它不会出现什么问题，但它只会以字符串格式输出对象，这不太美观。事实上，我们将<ul>完全放弃我们的方法，并使用<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>
Enter fullscreen mode Exit fullscreen mode

哇哦。好吧，也许不是，但别担心，你已经知道了所有你需要知道的事情。

  1. div v-for="game in games"同样，我们将循环我们的games数组道具并将每个游戏存储在game变量中。
  2. h1。好的，这game是一个对象，它又拥有自己的属性，name、console和ratings。在里面，<h1>我们将输出游戏的 *name: game.name。和 console: game.console。正如您现在所看到的，v-for并不局限于像我们之前看到的一样只输出一个元素，li但您实际上可以根据需要输出尽可能多的 HTML。
  3. 嵌套v-for。所以在span元素内部我们实际上有一个嵌套v-for循环（这完全没问题），只是有点不同，我们循环的不是数组或对象。我没有骗你，可能只是隐瞒了一些信息——比如，你实际上可以循环一个数值（在本例中，game.rating循环会从数值开始计数，1直到达到评分值。简单吧？
  4. 最后，如果v-if条件满足，我们将<div>在循环内输出一个标签，也就是说，当且仅当当前游戏的评分大于 5 时，才会输出标签。猜猜是哪一个？

继续在您的浏览器中再次运行它，您将会发现无需担心 CSS 的奇妙之处。

如果我不需要包装 DIV 怎么办？

如果在任何时候你发现自己制作了一堆<div>元素只是为了结束v-for循环，那么你可以使用一个特殊的 HTML 标签来帮助你解决这个问题。<template></template>

例如，如果您删除包装<div>并将其更改为<template>查看开发人员控制台，您将看到<h1>和<span>元素没有被任何东西包裹。

<template>很特殊，因为Vue会将其视为包装元素，但在执行它时它不会被渲染到 HTML 中，因此您可以安全地使用它来在循环中逻辑地包装一堆其他元素，而不会影响您的标记。

:key 属性

我特意把最后要说的一件事是：:key属性。

v-for 当你使用Vue.js循环遍历元素时，它完全不知道如何追踪元素的响应性，因为它无法“区分”不同的对象。这意味着，由于Vue无法做到这一点，它会重新渲染由本次循环创建的整个页面部分。在我们的例子中，这部分内容非常小，对性能的影响可能很小，但你应该牢记这一点——并且为了最佳实践而这样做。

现在，我们如何使用呢？

:key它需要一个字符串来“命名”或“跟踪”元素，所以我们需要给它一个唯一的标识符。在我们games这个简单的情况下，我们可以这样做：

<div v-for="game in games" :key="game.name">
Enter fullscreen mode Exit fullscreen mode

我非常确定这个列表中不会出现两次相同的游戏，所以这非常安全。id如果你的数据来自数据库，那么在这里使用也是非常理想的。

如果你对其中的复杂性感到好奇，:key可以随时查看文档。Key的文档

事实上，既然你已经读到这里，我再怎么强调熟悉文档的重要性也不为过。Vue.js的文档非常出色，代码示例也非常清晰，文档团队在保持文档更新和清晰性方面做得非常出色——非常感谢他们所有人。

最终代码

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

<html>

<head>
  <title>Vue 101</title>
</head>

<body>
<div id="app">
  <div v-for="game in games" :key="game.name">
    <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>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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

</html>
Enter fullscreen mode Exit fullscreen mode

挑战

这次，如果你愿意接受挑战，你将获得一个挑战。添加一个@click监听器<span>，输出游戏的评分，1每次点击都会增加该独特游戏的排名。你已经了解了实现这一目标所需的一切😉。

提示：您需要将game循环传递给点击函数，然后检查它。

祝你好运！

文章来源：https://dev.to/marinamosti/hands-on-vuejs-for-beginners-part-4-324l
Devto 翻译
PREV
那么 Vue.set 到底是什么？数据与响应式 陷阱 实际使用 Vue.set Vue 3.0
NEXT
Vue.js 初学者入门（第三部分） 简单的 if-else、v-if 和 v-show 开发工具 结论