css로 애니메이션을 주려면.
- 시작 전 class 명
- 애니메이션 끝난 후 class명
- 그리고 원할 때 2번 class명 부착
//<div class="start" :class="{ end : 모달창열렸니 }">
클래스명 : 조건
<div class="start" :class="{ end : true }">
// 모달창 열렸니가 true 일 때만 .end 부착
<ModalPage @closeModal="모달창열렸니=false" :원룸들="원룸들" :누른거="누른거" :모달창열렸니="모달창열렸니" />
</div>모달창이 열리고 난 뒤에 end가 나와야지.
class명을 조건부로 넣으려면
{클래스명 : 조건} 으로 작성해야한다.
💡 transition 태그로 애니메이션 주기
- 애니메이션 주고싶은 요소를 감싸기
<Transition name="작명"></Transition>- CSS로 다음과 같이 스타일 주기
.작명-enter-from { 애니메이션 동작 전 상태 }
.작명-enter-active { 애니메이션 동작 중 상태, 대부분 transition 이런거 }
.작명-enter-to { 애니메이션 동작 후 상태 }퇴장시 애니메이션을 주고 싶으면 스타일에서 enter라는 글자를 leave 이걸로 바꾸면 된다.
💡 Sort
원형을 변형시킨다.
<button @click="priceSort()"> 가격순 정렬</button>
methods에서
priceSort(){
//this.원룸들.sort()
var array = [3, 5, 2];
array.sort(); //문자순정렬(가나다)
array.sort(function(a,b){
return a - b
}; //숫자순정렬
}
숫자순 정렬에서 a는 3, b는 5이고 c라면 2겠지.
a-b 에서 이 부분이 음수면 a를 왼쪽으로 배정.
tip. 숫자정렬을 하려면 function(a,b)를 넣어 만든다
priceSort(){
this.원룸들.sort(function(a,b){
return a.price - b.price
// 원룸들이 지금 [{}.{}....]의 오브젝트 형태이기때문에
오브젝트.price 이렇게 가져와야함
});
}💡 원래대로 되돌리기 버튼
data(){
return {
원룸들오리지널 : [...data], //데이터원본.
원룸들 : data, //조작할 데이터
},
methods : {
sortBack(){
this.원룸들 = [...this.원룸들오리지널];
},
priceSort(){
this.원룸들.sort(function (a, b) {
return a.price - b.price
})
},되돌리기위해서 원본파일을 복사한 것인데 array/object 데이터의 각각 별개의 사본을 만들려면 [...array자료] 식으로 데이터를 만들어놔야한다.
그리고 sortBack()에서 등호로 array를 집어넣으면 왼쪽 오른쪽 값공유해주세요 라는 뜻이다.
그래서 우리가 array 자료를 복사하거나, 혹은 값공유가 일어나지 않게 집어넣고 싶으면 [...array자료] 이렇게 사용!!
📍 ... 문법 사용
자료의 사본을 만들고 싶을 때 사용하는데, 등호를 사용하는 것 가장 쉬운 방법이다.
예를 들면 a에 있던 자료를 b로 복사하고 싶으면
var a = '안녕하세요';
var b = a;등호는 오른쪽에 있던걸 대입하라는 뜻이니 a와 b는 둘다 안녕하세요가 된다.
그치만, array,object 자료를 등호로 복사하면 안됨!!!
var a = [1,2,3];
var b = a;이렇게 등호를 사용하면 자료의 사본을 만드는 것이 아닌, 값 공유가 된다.
-> a와 b가 [1,2,3] 을 공유하라는 의미.
그니까 이제 b를 수정하면 a에도 변경사항이 반영되는 것이고,
object도 저렇게 복사하면 똑같은 현상이 일어난다.
값공유가 일어나지않게 독립적인 array 복사본을 만들고 싶으면
var a = [1,2,3];
var b = [...a];이렇게 해야한다.
... 이 기호는 array나 object 앞에 붙일 수 있으며
array, object의 괄호를 제거해주는 문법이다.
-> . . . [1,2,3] 이런 식으로 쓰면 1,2,3만 남는다는 이야기
📍 가나다 정렬, 금액낮은순/높은순 정렬
<template>
<button @click="priceLow">가격낮은순</button>
<button @click="priceHigh">가격높은순</button>
<button @click="sortABC">가나다순</button>
<button @click="sortBack">되돌리기</button>
<button @click="priceDown()"> 50만원이하</button>
</template>
<script>
import data from './assets/oneroom';
export default {
name: 'App',
data(){
return {
oneroomOriginal : [...data],
oneroom : data,
}
},
methods : {
priceLow(){
this.oneroom.sort(function(a,b){
return a.price - b.price
});
},
priceHigh(){
this.oneroom.sort(function(a,b){
return b.price - a.price
});
},
sortABC(){
this.oneroom.sort(function(a,b){
return a.title.localeCompare(b.title)
});
},
sortBack(){
this.oneroom = [...this.oneroomOriginal];
},
priceDown(){
this.원룸들 = this.원룸들.filter(function (data) {
return data.price <'500000';
});
}
},
}📃 localeCompare
문자열과 문자열을 비교한다.
alert('a'.localeCompare('b')); // -1
alert('b'.localeCompare('a')); // 1
alert('b'.localeCompare('b')); // 0-
a는 c보다 사전적으로 앞에 있으므로 음수의 값을 가진다.
-> 'a'.localeCompare('c');
-> 결과 : -2 or -1 (아니면 다른 음수값) -
a와 a는 사전적으로 같은 위치에 있으므로 0을 가진다.
-> 'a'.localeCompare('a');
-> 결과 : 0
즉, 정확히 -1이랑 1만 가지는게 아니라, "음수값"과 "양수값"을 가진다고 생각해야한다.
