[vue3] 정렬

쌩 자바스크립트이 정렬은

1. 데이터를 정렬하고

2. HTML에 반영

 

Vue는 

1. 데이터 정렬하고 끝

-> {{데이터바인딩}} 해두면 HTML에 데이터가 실시간으로 반영 

 

sort() 함수

array.sort() 어레이 뒤에 sort하면 오름차순으로 정렬됨

사실은 문자 정렬을 하고 있음 (가나다순)

> 숫자 정렬은 sort() 함수 안에 funtion(a,b){a-b} 해줘야함

array.sort(function(a,b){return a-b})

 

이렇게 해야 1,2,3 숫자순 정렬

return값이 음수면 a를 왼쪽으로 보내줌 

 

*참고로 sort()하면 원본이 변형됨

map() filter()등은 원본을 보존해줌

 

요즘은 원본데이터를 보호하는것이 유행

data() {
    return {
      // originRooms : data,
      originRooms : [...data],
  }
}

array/object 데이터의 각각 별개의 사본을 만들려면 [...array자료]

 

 

  = 등호로 array를 집어 넣으면 왼쪽 오른쪽 값 공유하는 것이니 주의

    sortBack() {
      this.rooms = this.originRooms; 
    }

  sortBack() {
      this.rooms = [...this.originRooms]; 
    }

 

---

 

 

---

 

 

<template>
  <button @click="priceSort">가격순정렬</button>
  <button @click="sortBack">되돌리기</button>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      // originRooms : data,
      originRooms : [...data],
      rooms : data,
    }
  },
  methods : {
    priceSort() {
      this.rooms.sort(function(a,b){return a.price-b.price})
    },
    sortBack() {
      this.rooms = [...this.originRooms]; 
    }
  }
}
</script>