[Vue.js 기본 문법] v-if, v-on:click 이벤트 핸들링

v-if, v-on:click 이벤트 리스너 사용법!

v-if 를 사용하여

-> 버튼 클릭 시 속성 숨기기

1. 원하는 태그에 v-if를 넣는다.

2. true / false 데이터를 넣어줄 변수를 생성하여 data()에 넣어준다

나는 flag라는 데이터 생성

3. v-if="flag" 를 넣어준다.

button 클릭 시 v-if의 true / false 를 바꿔줄 것이기에

4. v-on:click을 button 태그에 써준다.

5. button 클릭 시 함수를 실행하게 v-on:click="함수이름" 라고 써준다.

6. 함수를 정의 해준다.

함수 안에서 flag를 true / false로 바꿔주면 됨.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">

    <h4 v-if="flag">Hello world, this is {{name}}.</h4>

    <button v-on:click="hideName"> 이름 숨기기</button>

  </div>
</template>

<script>
export default {
  name: 'App',
  components: {

  },
  data() {
    return {
      name: "sarah",
    };
  },
  methods:{
    hideName(){
      this.flag=false;
    }
  }
}
</script>

<style>
생략
</style>

v-on:click를 사용하여

-> 버튼 클릭 시 컨텐츠 정렬하기

button 클릭 시 컨텐츠를 정렬할 것이기에

1. v-on:click을 button 태그에 써준다.

2. button 클릭 시 정렬 함수를 실행하게 v-on:click="함수이름" 라고 써준다.

3. 정렬 함수를 정의해 준다.

가격순으로 정렬하는 것이 목표이기에 Oneroom.price로 비교하면 됨

this. 쓰는 것 까먹지 말자

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">

    <button v-on:click="sortPrice">가격순으로 정렬하기</button>

    <p>{{Oneroom[2].title}}</p>
    <img v-bind:src="Oneroom[2].image" alt="">
    <p>{{Oneroom[2].caption}}</p>
    <p>{{Oneroom[2].price}}</p>

    <p>{{Oneroom[1].title}}</p>
    <img v-bind:src="Oneroom[1].image" alt="">
    <p>{{Oneroom[1].caption}}</p>
    <p>{{Oneroom[1].price}}</p>

    <p>{{Oneroom[0].title}}</p>
    <img v-bind:src="Oneroom[0].image" alt="">
    <p>{{Oneroom[0].caption}}</p>
    <p>{{Oneroom[0].price}}</p>


  </div>
</template>

<script>
import Oneroom from './assets/rooms_post.js';

export default {
  name: 'App',
  components: {

  },
  data() {
    return {
      Oneroom: Oneroom,
    };
  },
  methods:{
    sortPrice(){
      this.Oneroom.sort(function(a,b){
        return a.price-b.price
      });
    },
  }
}
</script>

<style>
생략
</style>