201807 vue 리스트 필터

by duckduck0054

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>06-16</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>

<body>
<div id="app">
  <input type="text" v-model="carName" placeholder="검색할 차 이름"/>
  <ul>
    <li v-for="car in cars" v-if="car.name.includes(carName)">
      {{car.name}}: {{car.brand}}
    </li>
  </ul>
  <input type="text" v-model="car.name" placeholder="차 이름"/>
  <input type="text" v-model="car.brand" placeholder="차 브랜드"/>
  <button v-on:click="add">추가</button>
</div>
</body>
<script type="text/javascript">
const app = new Vue({
  el: '#app',
  data: {
    cars: [
      { name: '소나타', brand: '현대'},
      { name: 'K5', brand: '기아'},
      { name: '티코', brand: '대우'},
      { name: '렉스턴', brand: '쌍용'},
    ],
    car: {
      name: '',
      brand: ''
    },
    carName: ''
  },
  methods: {
    add () {
      this.cars.push(this.car);
      this.car = {};
    }
  }
});

/*
v-for 와 v-if 를 함께 사용하며 쉽게 리스트 필터를 구현할 수 있다. v-for 와 v-if 가 함께 사용되는 경우 v-if 보다 v-for 의 우선순위가 더 높기 때문에 v-for 결과로 나온 car 변수를 v-if 에서 참조할 수 있게 된다.

뷰의 배열 변경 감지의 경우, 감시중인 배열의 메소드(psuh, pop, splice...)를 래핑하여 뷰 갱신을 트리거한다.
대체적으로 뷰는 배열의 변경에 대해 잘 감지하지만, 직접 특정 index 의 값을 직접 치환하거나 배열의 길이를 수정하는 것은 감지하지 못한다.
*/
</script>
</html>