## 애니메이션
<transition name="fade">
<Modal v-on:closeModal="modalStatus = $event" :products="products" :modalStatus="modalStatus" :now="now" />
</transition>
원하는 html을 transition으로 감싸줌.
감싼후 이름을 정해줌(내맘대루)
스타일태그에 가서
.fade-enter-from{
opacity: 0;
}
.fade-enter-active{
transition: all 0.5s;
}
.fade-enter-to{
opacity: 1;
}
이렇게 작명-머머머머-머머머머이 세개 만들어주고
from에는 나타나기전,
to에는 나타난 후,
active에는 transition속성으로 걸리는시간.
사라지는건 enter대신 leave쓰면됨
.fade-leave-from{
opacity: 1;
}
.fade-leave-active{
transition: all 0.5s;
}
.fade-leave-to{
opacity: 0;
}
난 그냥 css로하는건 안되더라
## 정렬버튼 만들기
#가격순 정렬
<button v-on:click="priceSort">가격순 정렬</button>
먼저 템플릿에 버튼을 만들어주고 이 버튼을 누르면 priceSort함수가 실행되게 해놨다.
그리고 메서드에 함수를 만들어준다.
priceSort() {
this.products.sort(function (a, b) {
return a.price - b.price
})
},
products 어레이를 가져와서 안에있는 각 객체를 짬뽕해준다.
객체이므로 a.price로 써줘야한다.
# 되돌리기 버튼
<button v-on:click="sortBack">되돌리기</button>
되돌리기 버튼을 만들어준다.
sortBack() {
this.products = [...this.originalProducts];
},
이 메서드는 originalProducts라는 객체를 만지는데
이유는 만약 그냥 복사해버리면 참조되버려서 원하는대로안됨.
그래서 데이터안에
originalProducts : [...data],
이렇게 가져왔던 데이터를 깊은복사해서 완전 새로운 배열로 만들어줌.
깊은복사가 포인트임!
# 가나다순 정렬
<button v-on:click="sortAbc">abc순 정렬</button>
버튼만들고
sortAbc(){
this.products.sort(function(a,b){
if(a.title>b.title) return 1;
else if (b.title>a.title) return -1;
else return 0;
})
},
함수는 이렇게 만들었다.
안에내용은 모던자바스크립트에서 보긴했는데 깊이 안공부해서 걍 구글링으로 해결했다.
# 가격 역순 정렬
<button v-on:click="sortInverse">가격 역순 정렬</button>
버튼 만들고~
sortInverse(){
this.products.sort(function(a,b){
return b.price-a.price
})
}
메서드 만들고~