📱테스트 환경
"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 도 그렇고 .. 뭔가 다른거에비해 복잡한것같아ㅠ
'Javascript > Nuxt' 카테고리의 다른 글
[Nuxt] Event Bubbling 막는 방법 (0) | 2024.06.17 |
---|---|
[Nuxt] keep-alive 사용방법과 주의점 (0) | 2024.06.03 |
[Nuxt + Spring] formData에 image 배열 전송하기 (0) | 2024.05.28 |
[Nuxt] 헤더 (title, meta script ... 등) 넣는 방법 (0) | 2024.05.16 |
[Nuxt] Typescript 타입 무시 declare var (0) | 2024.05.16 |