본문 바로가기
FrontEnd/java script

[java script] Vue.js 조건(v-if)과 반복(v-for) 2

bobo12 2022. 12. 26. 11:03
728x90
반응형

오늘은 배열을 for문을 통해 나열하는 것을 추가로 배워보겠습니다.

 

바로 예제로 들어가 볼게요!

 

 

◎ table을 통해 다중 배열을 출력하는 예제

 

<!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/vue@2.5.17/dist/vue.js"></script>
	</head>
	<body>
		<h2>버튼으로 리스트에 추가/삭제 예제</h2>
		<div id="app">
			<ul>
				<li v-for="a in array">{{ a }}</li>
			</ul>
				<button v-on:click="addLast">맨 뒤에 추가</button><br>
				<button v-on:click="addFour(3)">네번째에 추가</button><br>
				<button v-on:click="changeFir(0)">첫번째를 변경</button><br>
				<button v-on:click="deleteSec(1)">두번째를 삭제</button><br>
		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					array: ['첫번째', '두번째', '세번째', '네번째', '다섯번째']
				},
				methods:{
					addLast: function(){
						this.array.push("[ 맨 뒤에 추가 ]");
					},
					addFour: function(index){
						this.array.splice(index, 0, '[추가]');
					},
					changeFir: function(index){
						this.array.splice(index, 1, '[변경]')
					},
					deleteSec: function(index){
						this.array.splice(index, 1)
					}
				}
			})
		</script>

		</script>
	</body>
</html>

 

 

th(행), td(열)에 모두 for문을 사용하면서 table이 나타나도록 정렬합니다.

이때 방법은 ranking(배열)을 line(배열)에 저장하고 line(배열)을 다시 item에 저장하면서 분리가 되도록 합니다.

자바나, 자바스크립트에서 for문을 이용해서 배열을 출력하는 방법과 유사하고 HTML에 적용한다는 것만 다릅니다.

line, item은 다른 글자로 바꿔도 상관없습니다.

 

 

◎ 배열 데이터의 추가와 삭제

 

   ▷ 배열.push(추가데이터)

   ▷ 배열.splice(인자1, 인자2, 인자3)

      ▶ 인자1 : index의 위치(지정위치)

      ▶ 인자2 : 개수 - 삭제할 개수 (0: 삭제 x, 1: 1개 삭제)

      ▶ 인자3 : 추가데이터(0일 때), 변경데이터(1 이상일 때)

 

<!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/vue@2.5.17/dist/vue.js"></script>
	</head>
	<body>
		<h2>버튼으로 리스트에 추가/삭제 예제</h2>
		<div id="app">
			<ul>
				<li v-for="a in array">{{ a }}</li>
			</ul>
				<button v-on:click="addLast">맨 뒤에 추가</button><br>
				<button v-on:click="addFour(3)">네번째에 추가</button><br>
				<button v-on:click="changeFir(0)">첫번째를 변경</button><br>
				<button v-on:click="deleteSec(1)">두번째를 삭제</button><br>
		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					array: ['첫번째', '두번째', '세번째', '네번째', '다섯번째']
				},
				methods:{
					addLast: function(){
						this.array.push("[ 맨 뒤에 추가 ]");
					},
					addFour: function(index){
						this.array.splice(index, 0, '[추가]');
					},
					changeFir: function(index){
						this.array.splice(index, 1, '[변경]')
					},
					deleteSec: function(index){
						this.array.splice(index, 1)
					}
				}
			})
		</script>
	</body>
</html>

 

순서대로 버튼을 클릭하면 위와 같은 결과가 출력됩니다.

v-on:click="addFour(3)"과 같이 표기한 이유는 위치를 지정하기 위해서입니다.
네번째 있는 배열을 지정하기 위해서 (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/vue@2.5.17/dist/vue.js"></script>
	</head>
	
	<body>
		<h2>버튼을 클릭하면 소트하는 예제</h2>
		<div id="app">
			<ul>
				<li v-for="i in Array">{{ i }}</li>
			</ul>
			<button v-on:click="sortData(Array)">소트</button>
		</div>

		<script>
			new Vue({
				el: '#app',
				data: {
					Array: ['one', 'two', 'three', 'four', 'five']
					// Array2: [20, 10, 9, 7, 14]
				},
				methods: {
					sortData: function(listdata){
						listdata.sort(function(a, b){
							return (a < b ? -1 : 1 );
							// return a-b; : 오름 차순
							// 첫 번째 인수가 두 번째 인수보다 작을 경우 (-)값
							// Array2 : 7, 9, 10, 14, 20
							// return b-a; : 내림 차순
							// 첫 번째 인수가 두 번째 인수보다 클 경우 (+)값
							// Array2 : 20, 14, 10, 9, 7
						});
					}
				}
			})
		</script>
	</body>
</html>
소트를 누르면 오름차순으로 정렬되는 결과가 나옵니다.

그냥 sort함수만 사용해도 정렬되는 결과가 나옵니다.(기본적으로 오름차순 정렬 기준입니다.)
대신 아스키코드 기준이므로 원하는 결과가 출력되지 않을 수 있습니다.

이는 sort함수의 특징입니다. 문자는 아스키 코드를 기준으로 정렬되어 출력됩니다.

위의 return a-b는 숫자에서만 적용되고 문자에서는 적용이 되지 않습니다.

 

위의 Array2의 예시를 가지고 sort를 정리해보겠습니다.

 

No Array2[0] Array2[1] Array2[2] Array2[3] Array2[4]
기존 배열 20 10 9 7 14
1 10 20 9 7 14
2 9 20 10 7 14
3 7 20 10 9 14
4 7 20 10 9 14
5 7 10 20 9 14
6 7 9 20 10 14
7 7 9 20 10 14

 

위와 같이 첫번째와 두번째~다섯번째까지 비교를 하고 다음엔 두번째와 세번째~다섯번째까지 비교를 하면서 가장 작은 값을 앞으로 가져오면서 오름차순으로 정렬해줍니다.

 

 

일단 여기까지 정리하고 다음 글에서 더 정리해보겠습니다!!

 

 

728x90
반응형

'FrontEnd > java script' 카테고리의 다른 글

[java script] Vue.js의 구글 차트란?  (0) 2022.12.26
[java script] Vue.js 조건(v-if)과 반복(v-for) 3  (0) 2022.12.26
[java script] Vue.js 조건(v-if)과 반복(v-for) 1  (2) 2022.12.24
[java script] Vue.js 유저 조작과 연동(v-on)  (0) 2022.12.22
[java script] Vue.js 유저 입력 연결(v-model)  (0) 2022.12.22

'FrontEnd/java script' Related Articles

티스토리툴바