본문 바로가기
Frontend/Vue 2

vue3 v-if / v-else-if / v-else

by SOLYI 2021. 10. 18.
<template>
  <button @click="handler">
    click me!
  </button>
  <h1 v-if="isShow">
    Hello!!!! 
  </h1>
  <h1 v-else-if=" count > 3">
    Count > 3
  </h1> 
  <h1 v-else>
    Good~~!
  </h1>
</template>

<script>
export default {
  data(){
    return{
      isShow: true,
      count: 0
    }
  },
  methods:{
    handler(){
      this.isShow = !this.isShow
      this.count += 1
    }
  }
}
</script>
반응형

'Frontend > Vue 2' 카테고리의 다른 글

vue3 v-for  (0) 2021.10.18
vue3 v-if / v-show  (0) 2021.10.18
vue3 클래스, 스타일 바인딩  (0) 2021.10.18
vue3 watch  (0) 2021.10.18
vue3 computed - getter setter  (0) 2021.10.18