[Vue] 뷰에서 if else 쓰기 (v-if, v-else-if, v-else)

1.

v-if 문법
조건식이 참일 때만 html 보여줌

 

<img src="./assets/room0.jpg" 
    @click="열렸니 = true"
>
  <div v-if="열렸니 === true">
      <button @click="열렸니 = false" > 닫기 </button>
  </div>

<script>
    export default {
        name: 'App',
        data(){
            return{
                열렸니: false,
            }
        },
        methods : {
        },
        components: {
        }
    }
</script>

 

 

 

 

2. 

v-else-if: 조건식을 연달아서 두개 세개 사용

v-else: v-if,v-else-if 에 적은 조건식이 참이 아닐 경우 실행

<div v-if="1 == 2">
  안녕하세요
</div>
<div v-else-if="1 == 3">
  안녕하세요2
</div>
<div v-else>
  안녕하세요2
</div>