[vue.js] 3-2 v-if 와 v-on

0. 시작

 router로 v-if와 v-on을 볼 새로울 페이지를 만든다 (이전까지 했으므로 과정은 생략한다)

 

1. v-for에서 썻던 template를 가져온다

// ./src/view/vif.vue

<template>
  <vfor/> //3. 사용
</template>

<script>

import vfor from './vfor.vue'; // 1. 사용할 vue를 선언해서 가져온다.

export default {
  data: function() {
    return {
    }
  },
  components: {
    vfor // 2. 사용하게끔 components 에 넣어준다
  }
}
</script>

2. v-if와 v-on

<template>
  <div>
    <div v-if="show">
      <vfor/>
    </div>
    <div>
      <button type="button" v-on:click="func">btn</button>
    </div>
  </div>
</template>

<script>
import vfor from './vfor.vue';

export default {
  data: function() {
    return {
      show: true
    }
  },
  methods: {
    func: function() {
      if(this.show) {
        this.show = false;
      } else {
        this.show = true;
      }
    }
  },
  components: {
    vfor
  }
}
</script>

html 태그안에 v-if를 넣어서 사용할 수 있다.

v-on 은 보통 어떠한 액션들을 취했을때 실행시킬수 있다.

여기서는 func라는 기능이고, 이걸 methods: {} 안에 넣어서 실행시켰다.

만약 show변수가 true라면 테이블이 보여질것이고 show변수가 false라면 테이블은 보이지 않을 것이다.

v-if "true"

v-if "false"

 

 

v-on 디렉티브 종류

// 출처 : https://uxgjs.tistory.com/119

Vue.js의 이벤트 사용 방법 정리