Javascript/Nuxt

[Nuxt] if else view 조작하기

eulBlue 2024. 5. 9. 10:24

📱테스트 환경

"nuxt": "^3.11.2"
"vue": "^3.4.21"
"vue-router": "^4.3.0"

햐 .. Vue 를 거의 3년만에 쓰다보니까 .. 햇갈려서 너무 어렵다 ㅠ

내가원하는 건 조건에 따라서 버튼이 보였다 안보였다 하고 싶었는데

React 에서는 중괄호 안에 조건을 태워서 사용하면 됐는데 ..

Vue 에서는 그게 안돼고 v-if 라는걸 사용했어야 했다 ㅠ

<button
          class="delete-btn"
          v-if="editBtn === '수정하기'"
        >
          삭제
        </button>

이런식으로 v-if 에 boolean 값을 주고 view 를 조작하는구조이다.

<button
          class="delete-btn"
          v-if="editBtn === '수정하기'"
        >
          삭제
        </button>
        <button class="cancel-btn" @click="goBack" v-else>취소</button>

 이런식으로 if else 에 따라서 보여줄 수 있도록 ? : 구조도 이런식으로

표현해 줄 수 있다.

vue 는 쓸때마다 v-for 도 그렇고 .. 뭔가 다른거에비해 복잡한것같아ㅠ