
Vue.js 공부 기록(7) - 조건부 렌더링 v-if, v-show
💻 my code archive/💎Vue.js
2022. 4. 20. 16:58
🔍조건부 렌더링 Vue.js에서도 if문을 제공한다. Vje.js에서 조건부 렌더링 시에 사용하는 디렉티브는 v-if, v-show가 있다. 🔍예제 show에 false를 주었기 때문에 브라우저 화면에 아무 것도 나타나지 않는다. 이번에는 토글 버튼을 추가하는 코드를 작성해 보았다. true로 주었기 때문에 토글 버튼 클릭 시 Yes 메시지가 나타난다. 여러 개의 div 태그에 조건부 렌더링을 하고 싶다면 template 태그로 묶어서 사용하면 된다. 아래와 같이 v-if와 @click을 같이 줄 수도 있다. 버튼 클릭 시 숫자가 1씩 증가하는 것을 확인할 수 있다. 그렇다면 v-if와 v-show의 차이점은 무엇일까? 아래의 개발자도구에서 확인해 보면 알 수 있듯이, v-if는 조건에 따라 컴포넌트가 ..