Vue.js에 대한 실용적인 소개: 배열과 객체를 반복하는 방법
이전 섹션(과정 3부)에서는 조건부 렌더링에 v-if 및 v-show를 사용하는 방법을 배웠습니다. 이 섹션에서는 배열과 객체를 반복하는 방법을 배우고, 또한 이전에 배운 개념 중 일부를 적용해 보겠습니다. 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>让我们先创建一个简单的数组，这样我们可以使用循环输出数组里的内容。我们将在 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>让我们来详细分析一下：
- <li>
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: '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>?. 看到上面一大堆是不是很害怕？不用担心，你只需要了解的是什么，让我们详细分析一下：
- <li>
div v-for="game in games" 还是老样子，我们要循环 games 数组，并将 games 数组内的每个对象存储在 game
v-for
v-for는 Vue의 기본 지침 중 하나입니다. 사용법을 익히면 사용할 수 있습니다. 프로그램에 더 많은 기능을 추가하세요. 🎜🎜간단히 말하면 v-for는 for 루프입니다. 여전히 for 루프가 무엇인지 모르는 경우 for 루프는 실제로 코드 조각입니다. 코드의 각 요소는 한 번 실행되며 이러한 요소는 일반적으로 Array(array) 또는 Object(object)입니다. 🎜🎜오늘 우리는 우리가 하는 모든 일이 명확한 목적을 갖도록 처음부터 시작합니다. 다음은 편집기에 복사하여 붙여넣을 수 있는 index.html 파일의 기본 구조입니다. 🎜<div v-for="game in games" :key="game.name">
data 개체에 속성을 생성하겠습니다. 물론 원하는 이름을 선택할 수도 있습니다???. 🎜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
<ul> 태그를 만들어 보겠습니다. 🎜rrreee🎜멋져요! 이제 배열을 반복하여 <ul>에서 가능한 한 많은 <li> 태그를 출력하고 싶다고 Vue에 알려야 합니다. . 🎜🎜다른 언어에서는 <li> 태그를 반복하는 데 익숙할 수 있습니다. 🎜rrreee🎜루핑해야 하는 <li> 태그를 래핑합니다. 루프에서. 🎜🎜하지만 Vue에서는 반복하려는 태그에 v-for 지시문을 선언할 수 있습니다. 먼저 <li> 태그를 다음과 같이 변경하면 단계별로 분석해 보겠습니다. 🎜rrreee🎜자세히 분석해 보겠습니다. 🎜- <li>🎜
v-for 지시문은 < 앞서 본 <ul> 태그 대신 li> 태그를 사용하세요. 이 글을 작성하는 이유는 "games 배열의 각 game에 대해 <li> 태그를 생성하기 때문입니다. 🎜< li>🎜 games는 앞서 data에 추가한 속성이므로 이 변수 이름 🎜<li>🎜<을 사용해야 합니다. game 이 변수(단수)는 item, game, title 또는 기타 이름을 사용할 수 있습니다. 하지만 이 게임은 루프에서 사용하려는 변수라는 점을 이해해야 합니다. 🎜<li>🎜마지막으로 <li>. code> 태그에서는 <code>game 변수의 내용을 출력하려고 하므로 루프를 실행하면 games 배열의 문자열이 로 출력됩니다. ><li> 태그 🎜index.html 파일을 열면 games가 표시됩니다. 배열의 내용이 화면에 출력됩니다. 🎜난이도를 높이세요
🎜지금까지는 너무 좋습니다v-for? 실제로는 매우 간단합니다. 하지만 이 예제는 너무 지루합니다. 배열에 일부 개체를 포함하고 v-if<. /code>를 사용하여 상황을 좀 더 복잡하고 흥미롭게 만들어 보겠습니다. 🎜🎜먼저 <code>를 업데이트해 보겠습니다. 좀 더 흥미로운 데이터가 포함된 games 속성 🎜rrreee🎜지금 프로그램을 실행하면 문제가 발생하지 않지만 games의 개체만 문자열 형식으로 출력됩니다. 실제로 <ul> 태그를 완전히 삭제하고 <div> 태그를 사용하여 정보를 출력해야 합니다(걱정하지 마세요. div를 사용하면 여전히 보기 흉하게 보일까요?) 🎜🎜전체 <div id="app">가 다음 콘텐츠로 대체됩니다.🎜rrreee🎜? 위에 있는 것 중? 걱정하지 마세요. 그것이 무엇인지만 알면 됩니다. 자세히 분석해 보겠습니다. 🎜<li>🎜div v-for=" game in games" 다시 한 번 games 배열을 반복하고 game의 games 배열에 각 개체를 저장하겠습니다. 코드> 변수. 🎜<li>看看 <h1> 标签. 因为 game 是一个对象，而这个对象里又有自己的 name、console 和rating 属性。在 <h1> 里面，我们要输出 game 内的 game.name 和 game.console。正如你现在所看到的那样，v-for 并不像我们之前只输出 <li> 标签，实际上你可以根据你的需要输出不同的 HTML 标签。
<li>嵌套的 v-for。在 span 标签里面，我们有一个嵌套的 v-for 循环(这完全是可以的)，只是有点不同，在这里我们没有循环数组或对象。而是循环了一个数值（在本例中是 game.rating，循环将根据 game.rating 的值开始计数，然后输出对应数量的❤️。很简单吧？)
<li>最后是 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 id="app">
<div v-for="game in games" :key="game.name">
<h1>{{ game.name }} - {{ game.console }}
❤️
Wow, this game must be REALLY good
<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>
로그인 후 복사
小测验
请在 <span> 标签中添加一个 @click 事件，使它每次点击就会增加一个❤️。
提示: 你需要将正在循环的 game 对象传递给点击方法。
原文地址：https://dev.to/marinamosti/hands-on-vuejs-for-beginners-part-4-324l
译文地址：https://www.php.cn/link/5a13fe4ac11f3e35f4b9f0a99cf504c0
위 내용은 Vue.js에 대한 실용적인 소개: 배열과 객체를 반복하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7517
15
1378
52
79
11
53
19
21
66
Vue 용 버튼에 기능을 추가하는 방법
Apr 08, 2025 am 08:51 AM
HTML 템플릿의 버튼을 메소드에 바인딩하여 VUE 버튼에 함수를 추가 할 수 있습니다. 메소드를 정의하고 VUE 인스턴스에서 기능 로직을 작성하십시오.
Vue에서 부트 스트랩을 사용하는 방법
Apr 07, 2025 pm 11:33 PM
vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.
vue.js로 JS 파일을 참조하는 방법
Apr 07, 2025 pm 11:27 PM
vue.js에서 JS 파일을 참조하는 세 가지 방법이 있습니다. & lt; script & gt; 꼬리표;; mounted () 라이프 사이클 후크를 사용한 동적 가져 오기; Vuex State Management Library를 통해 수입.
Vue에서 시계를 사용하는 방법
Apr 07, 2025 pm 11:36 PM
vue.js의 시계 옵션을 사용하면 개발자가 특정 데이터의 변경 사항을들을 수 있습니다. 데이터가 변경되면 콜백 기능을 트리거하여 업데이트보기 또는 기타 작업을 수행합니다. 구성 옵션에는 즉시 콜백을 실행할지 여부와 DEEP를 지정하는 즉시 포함되며, 이는 객체 또는 어레이에 대한 변경 사항을 재귀 적으로 듣는 지 여부를 지정합니다.
Vue가 이전 페이지로 돌아 오는 방법
Apr 07, 2025 pm 11:30 PM
vue.js는 이전 페이지로 돌아갈 수있는 네 가지 방법이 있습니다. $ router.go (-1) $ router.back () 사용 & lt; router-link to = & quot;/quot; Component Window.history.back () 및 메소드 선택은 장면에 따라 다릅니다.
Vue는 천막/텍스트 스크롤 효과를 인식합니다
Apr 07, 2025 pm 10:51 PM
CSS 애니메이션 또는 타사 라이브러리를 사용하여 VUE에서 Marquee/Text Scrolling Effects를 구현하십시오. 이 기사는 CSS 애니메이션 사용 방법을 소개합니다. & lt; div & gt; CSS 애니메이션을 정의하고 오버플로를 설정하십시오 : 숨겨진, 너비 및 애니메이션. 키 프레임을 정의하고 변환을 설정하십시오 : Translatex () 애니메이션의 시작과 끝에서. 지속 시간, 스크롤 속도 및 방향과 같은 애니메이션 속성을 조정하십시오.
Vue Pagination 사용 방법
Apr 08, 2025 am 06:45 AM
Pagination은 큰 데이터 세트를 작은 페이지로 나누어 성능 및 사용자 경험을 향상시키는 기술입니다. VUE에서 다음 내장 방법을 페이징에 사용할 수 있습니다. 총 페이지 수를 계산하십시오 : TotalPages () Traversal 페이지 번호 : V-For Directive 현재 페이지를 설정하려면 : CurrentPage 현재 페이지 데이터 가져 오기 : currentPagedAta ()
함수 인터셉트 vue를 사용하는 방법
Apr 08, 2025 am 06:51 AM
VUE의 기능 차단은 지정된 기간 내에 기능이 호출되는 횟수를 제한하고 성능 문제를 방지하는 데 사용되는 기술입니다. 구현 방법은 다음과 같습니다. lodash 라이브러리 가져 오기 : 'lodash'에서 import {debounce}; Debounce 기능을 사용하여 인터셉트 기능을 만듭니다. const debouncedfunction = debounce (() = & gt; { / logical /}, 500); 인터셉트 함수를 호출하면 제어 기능이 최대 500 밀리 초 안에 한 번 호출됩니다.
