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 도 그렇고 .. 뭔가 다른거에비해 복잡한것같아ㅠ