# 랜더링 문법
1. v-if vs v-show
v-if 는 조건에 따라 컴포넌트가 실제로 제거되고 생성된다.
v-show는 단순히 css 의 display 속성만을 변경
# 이벤트 처리
|
<div>
<button type="button" v-on:click ="increaseCounter">Add 1 </button>
<p>The Count is : {{counter}}</p>
</div>
//methode 부분에 increaseCounter 함수를 만들어 줍니다. increaseCounter() {
this.counter = this.counter +1;
}
|
[결과] Add1 버튼을 클릭시 Count가 증가합니다.
-- KeyUp 활용하는 방법 Vue.js 파일에
| <input type="text" v-model="textValue" @keyup.enter="showValue"/> |
생성한 뒤 스크립트 부분의 메소드 부분에서 추가
| showValue(){ alert(this.textValue); } |
텍스트박스에 쓴 글씨를 쓰고 엔터를 눌렀을 경우 저렇게 Alert창이 뜨는 것을 볼수 있다.
'Dev > Vue.js' 카테고리의 다른 글
| [Vue 프로젝트 06] 간단한 조회화면,저장화면 (0) | 2022.02.13 |
|---|---|
| [Vue 프로젝트 04] Vue 컴포넌트 개발 1 (0) | 2022.01.16 |
| [Vue 프로젝트 03] 메뉴 구성(Router,Lazy Load) (0) | 2022.01.16 |
| [Vue 프로젝트 02] Vue 프로젝트 생성 (0) | 2022.01.14 |
| [ Vue 프로젝트 01] 개발환경 구성 (0) | 2022.01.14 |