Vue.js_v-if,v-else

v-if,v-else

<div v-if="liked">like clicked !</div>
<button v-else @click="onClickButton()">like</button>

<script>
  const app = new Vue({
    el: '#root',
    data: {
      liked: false
    },
    methods: {
      onClickButton(){
        this.liked = true
      }
    }
  })
</script>   

if-else 문은 v-if="", v-else로 사용하며,
click event 는 @click="" 으로 사용한다.
대개 이렇게 사용하며 다른방법도 있음

v-if 에서 데이터인 liked 가 false 이므로 보여지지않고,
button 을 클릭하면 onClickButton() 함수가 발생하여 liked 에 true 가 들어가 "like clicked !" 가 보여지게된다.

+추가
v-if 와 v-show는 같은역학을한다.
그 차이점으로 v-if는 조건에 따라 컴포넌트가 실제로 제거되지만
v-show를 사용할 경우, css의 hidden처리만 될 뿐 제거되진 않는다.