카테고리 없음

vueJsvue js 기본 // 애니메이션 주기 & 정렬버튼

부엉이사장 2022. 7. 9. 06:14

## 애니메이션

  <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
      })
    }

메서드 만들고~