• 技术文章 >web前端 >Vue.js

    Vue.js实战入门:如何对数组和对象进行循环

    青灯夜游青灯夜游2022-11-15 20:09:02转载243

    大前端成长进阶课程:进入学习


    上一节中 (课程第三部分) 我们学习了如何使用 v-ifv-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>

    让我们先创建一个简单的数组,这样我们可以使用循环输出数组里的内容。我们将在 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>

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

    在其他语言中,你可能已经习惯了这样来循环输出 <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>

    让我们来详细分析一下:

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

    提升点难度

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

    首先,我们用一些更有趣的数据来更新我们的 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 }
      ]
    },

    如果你现在运行我们的程序,它不会出错,但它只会以字符串的格式输出 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>

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

    来吧,在浏览器中继续运行我们的 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 的文档非常出色,文档团队在保持更新和清晰性方面做了很多努力并且通过代码示例把每个部分都解释的非常清楚。

    最终代码

    以防万一,这是最终的代码:

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

    小测验

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

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

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

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

    (学习视频分享:web前端开发编程基础视频

    以上就是Vue.js实战入门:如何对数组和对象进行循环的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:learnku,如有侵犯,请联系admin@php.cn删除

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:Vue
    上一篇:一文聊聊Vue中的KeepAlive组件 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 浅析Vue项目中怎么用Pinia状态管理工具• 浅析Vue中父子组件间怎么通信(父传子|子传父)• 一文搞懂vue2 diff算法(附图)• 深入了解Vue中的动态组件• 实例讲解vue如何实现打印小票
    1/1

    PHP中文网