[백견불여일타/Vue.js] 6장 - 조건문 & 반복문

128636 단어 vue.js프론트엔드vue.js

🎁후기

4/1부터 Spring framework를 공부를 시작했습니다. 이 얘기를 지금 vue 포스팅하는 시점에 왜 언급을 하냐면은, 곧 vue를 활용하여 to do list와 게시판 토이 프로젝틀를 할 예정이기 때문입니다. 프론트엔드 공부하는 겸에 spring으로 백 단을 구축해놓으면 더 간지날 것 같습니다.

🍰핵심 키워드

  • 조건
  • 반복
  • v-if
  • v-for

🛬개요

이번시간에는 Vue를 활용하여 조건을 만족했을 때 태그가 표시되도록 하는 v-if와, 태그를 특정 횟수만큼 만복하여 표시하는 v-for에 대해 배웁니다. 오늘 주제는 예제가 많습니다.(8개...) 하다보면 빡치긴 합니다. 하지만 그만큼 많이 활용하는 중요한 부분이라는 뜻이겠죠?ㅎㅎ

[01] 조건에 따른 표시 : v-if

조건에 따라 HTML 태그를 표시하고 싶을 때 v-if 디렉티브를 사용합니다.

서식

<태그명 v-if="조건"></태그명>
<태그명 v-else-if="조건"></태그명>
<태그명 v-else></태그명>

"조건"에는 true/false 즉, boolean 값이 들어갑니다.

예제 1 - true일 때만 표시되는 예제

결과

소스코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 align="center">true일 때만 표시하는 예제</h2>
			<input type="checkbox" v-model="checked"> 표시
			<p v-if="checked"> 체크박스가 ON</p>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					checked: false
				}
				})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
</style>

예제 2 - true/false를 ON/OFF로 표시

결과

소스코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 align="center">true와 false를 ON/OFF로 표시하는 예제</h2>
			<input type="checkbox" v-model="checked"> 표시
			<p v-if="checked"> 체크박스가 ON</p>
			<p v-else> 체크박스가 OFF</p>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					checked: false
				}
				})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
</style>

예제 3 - 버튼을 클릭하면 버튼을 삭제

결과

소스코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 align="center">클릭하면 "good" 버튼을 삭제하는 예제</h2>
			<button v-on:click="deleteButton" v-if="showButton">good</button>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					showButton: true
				},
				methods:{
					deleteButton: function(){
						alert("버튼을 삭제합니다.");
						this.showButton = !this.showButton;
					}
				}
				})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
</style>

❗ 잠깐 v-show란?

v-if처럼 태그를 안보이게 하는 디렉티브입니다.
하지만 v-if는 false일 때 HTML 코드에서 해당 태그 코드를 삭제하지만, v-show는 단순히 안보이게만 합니다.
마치 css에서 display:none 한 것과 똑같은 효과입니다.

[02] 반복 표시 : v-for

HTML 태그를 반복해서 표시하고 싶을 때 v-for를 사용합니다.
홈페이지 상단 메인 메뉴 출력, list 출력, 표 출력 시 v-for를 사용하면 코드가 확 줄어주는 효과를 볼 수 있습니다.

서식 1 - 배열 활용

<태그명 v-for="변수 in 배열"></태그명>

서식 2 - 단순 횟수

<태그명 v-for="변수 in 숫자"></태그명>

서식 3 - 인덱스까지 활용

<태그명 v-for="(변수,인덱스) in 배열"></태그명>

예제 1 - 배열 데이터를 v-for로 출력

결과

소스코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 align="center">배열 데이터를 리스트로 표시하는 예제</h2>
			<li v-for="item in myArray">{{item}}</li>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					myArray: ["쨈빵", "멜론빵", "크로와상"]
				}
				})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
</style>

예제 2 - 오브젝트 데이터를 v-for로 출력

결과

소스코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 align="center">오브젝트 데이터를 리스트로 표시하는 예제</h2>
			<li v-for="item in myObjects">{{item.name}} ₩{{item.price}}</li>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					myObjects: [{name:'쨈빵', price:1000},
					{name:'멜론빵', price:1200},
					{name:'크로와상', price:1500}]
				}
				})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
</style>

예제 3 - 구구단 5단을 v-for로 출력

결과

소스코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 align="center">구구단 5단을 v-for로 출력</h2>
			<li v-for="n in 10"> 5X{{n}} = {{5*n}}</li>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
				}
				})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
</style>

예제 4 - 번호를 붙여서 배열 데이터를 v-for로 출력

결과

소스코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 align="center">번호를 붙여서 배열 데이터를 v-for로 출력</h2>
			<li v-for="(n,i) in myArray"> {{i}} : {{n}}</li>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					myArray: ["쨈빵","멜론빵","크로와상"]
				}
				})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
</style>

예제 5 - 표를 v-for로 출력

결과

소스코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 align="center">표를 v-for로 출력</h2>
			<table>
				<th v-for="h in header"> {{h}}</th>
				<tr v-for="rank in ranking">
					<td v-for="r in rank">{{r}}</td>
				</tr>
			</table>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					header: ["Programming Language", 2018, 2013, 2008, 2003, 1998],
					ranking: [
						['Java',1,2,1,1,16],
						['C',2,1,2,2,1],
						['C++',3,4,3,3,2],
						['Python',4,7,6,11,23],
						['JavaScript',7,10,8,7,20]
					]
				}
				})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
table{
	width:100%;
	text-align:left;
}
table td{
	padding:12px;
	border-botton:2px solid darkgray;
}
table tr:nth-of-type(even){
	background-color:rgba(0,0,255,0.1);
}
</style>

배열 데이터 추가/삭제

서식

배열.push("데이터"); //데이터 추가
배열.splice(배열위치,0,"데이터"); //특정 위치의 데이터 추가
배열.splice(배열위치, 1);// 특정 위치의 데이터 삭제
배열.splice(배열위치, 1, "데이터"); //특정 위치의 데이터 변경

예제 5 - 버튼으로 리스트에 추가/삭제

결과

소스코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 align="center">버튼으로 리스트에 추가/삭제</h2>
			<li v-for="item in toDoList">{{item}}</li>
			<button @click="addLastly()">맨 뒤에 추가</button><br>
			<button @click="addObj(3)">네번 째에 추가</button><br>
			<button @click="motifyObj(0)">첫번째 값 변경</button>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					toDo:'',
					number: 0,
					toDoList: ['첫번째','두번째','세번째','네번째','다섯번째']
				},
				methods:{
					addLastly:function(){
						this.toDoList.push('[맨 뒤에 추가]');
					},
					addObj:function(n){
						this.toDoList.splice(n,0,'[추가]');
					},
					motifyObj:function(n){
						this.toDoList.splice(n,1,'[변경]');
					}	
				}
				})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
table{
	width:100%;
	text-align:left;
}
table td{
	padding:12px;
	border-botton:2px solid darkgray;
}
table tr:nth-of-type(even){
	background-color:rgba(0,0,255,0.1);
}
button{
	float:center;
}
</style>

예제 6 - 버튼 클릭하면 정렬

결과

소스코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 align="center">버튼 클릭하면 정렬</h2>
			<li v-for="item in myArray">{{item}}</li>
			<button v-on:click="sortArray(myArray)">클릭</button>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					myArray: ['one', 'two', 'three', 'four', 'five']
				},
				methods:{
					sortArray:function(arr){
						arr.sort(function(a,b){
							return (a<b ? -1 : 1);
						});
					}
				}
				})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
table{
	width:100%;
	text-align:left;
}
table td{
	padding:12px;
	border-botton:2px solid darkgray;
}
table tr:nth-of-type(even){
	background-color:rgba(0,0,255,0.1);
}
button{
	float:center;
}
</style>

JS에서 sort 함수

  • 오름차순 정렬
    배열이름.sort(function(a,b){return a<b?-1:1});
  • 내림차순 정렬
배열이름.sort(function(a,b){return a>b?-1:1});

예제 7 - 짝수만 표시

결과

소스코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 align="center">짝수만 표시</h2>
			<li v-for="item in myArray" v-if="item%2==0">{{item}}</li>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					myArray: [1,2,3,4,5,6,7,8,9,10]
				},
				methods:{
					sortArray:function(arr){
						arr.sort(function(a,b){
							return (a<b ? -1 : 1);
						});
					}
				}
				})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
table{
	width:100%;
	text-align:left;
}
table td{
	padding:12px;
	border-botton:2px solid darkgray;
}
table tr:nth-of-type(even){
	background-color:rgba(0,0,255,0.1);
}
button{
	float:center;
}
</style>

예제 8 - 버튼을 클릭하면 짝수만 표시

결과

소스코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 align="center">버튼을 클릭하면 짝수만 표시</h2>
			<li v-for="item in myArray">{{item}}</li>
			<button v-on:click="showEvenNum">짝수만 표기</button>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					myArray: [1,2,3,4,5,6,7,8,9,10]
				},
				methods:{
					showEvenNum:function(){
						this.myArray = this.myArray.filter(function(value){
							return value%2==0;
						});
					}
				}
				})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
table{
	width:100%;
	text-align:left;
}
table td{
	padding:12px;
	border-botton:2px solid darkgray;
}
table tr:nth-of-type(even){
	background-color:rgba(0,0,255,0.1);
}
button{
	float:center;
}
</style>
[iOS 앱] 우리만의 디데이
[C#이 보이는 그림책] 2. 연산자

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage