반응형
코드
- v-if, v-else, v-on:click를 사용한 코드를 통해 개념 정리
<body>
<div id="test">
<button v-if=" push==false " v-on:click=" push=true ">버튼</button>
<div v-else>버튼 눌림</div>
</div>
</body>
<script>
new Vue({
el: "#test",
data: {
push: false,
},
});
</script>코드 설명
- push는 false로 초기화 되어있음 (인스턴스 생성시 false로 초기화)
- button을 생성하려는데 v-if가 있기때문에 조건을 만족해야 button을 생성함
- 조건 'push==false'에 만족하기 때문에 button이 생성됨
- if문에 만족하면 else문은 만족하지 않으므로 div는 생성되지 않음
- v-on:click은 객체가 클릭되었을 때 실행됨 (다른 객체들에도 사용 가능하지만 주로 버튼에 사용)
- 버튼이 클릭되면 'push=true'라는 스크립트 코드가 실행되서 push는 true로 바뀜
- push가 true가 되면 v-if가 만족하지 않으므로 button 생성이 안되고 v-else에 만족하게 됨
- v-else에 만족하므로 div가 생성됨
- v-else 대신 v-else-if=" push==true"를 써줘도 됨
결과
- 초기 화면
- 버튼 눌렀을 때
정리
- v-if, v-else-if, v-else : 지정한 조건에 충족하면 객체 생성
- v-on:click : 객체가 클릭되었을 때 메소드 실행
- v-on:click대신 @click을 써줘도 됨
반응형
'Vue.js' 카테고리의 다른 글
| [Vue.js] v-for(index), 배열 (0) | 2021.08.22 |
|---|---|
| [Vue.js] props속성, v-bind, camelCase, kebab-case (0) | 2021.08.21 |
| [Vue.js] 컴포넌트(전역 컴포넌트, 지역 컴포넌트) (0) | 2021.08.20 |
| [Vue.js] v-model, v-on:submit, 랜덤숫자생성, event.preventDefault() (0) | 2021.08.20 |
| [Vue.js] 인스턴스, 속성(el, data, methods) (0) | 2021.08.19 |