Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
Tags
- 파이썬
- 코테
- nuxt
- EC2
- spring boots
- JavaScript
- TypeScript
- docker
- NanoHttpd
- Jenkins
- 코딩테스트
- css
- kotlin
- 광고 id
- 오퍼월
- nginx
- toml
- chrome
- 티스토리챌린지
- Express
- 오블완
- Android
- Next
- 백준
- React
- 개발
- it
- python
- AWS
- react-native
Archives
- Today
- Total
내맘대로 개발일지
[Nuxt] if else view 조작하기 본문
📱테스트 환경
"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 |