Language/Vue.js
Vue 이벤트 핸들러
JJcoding
2024. 4. 29. 21:05
이벤트 핸들러 : HTML 클릭시 코드 실행하는 것
<div>
<h4>{{ products[0] }}</h4>
<p>50 만원</p>
<button v-on:click="자바스크립트~~">허위매물신고</button> <span>신고수 : 0</span>
</div>
--> v-on:click="자바스크립트" 혹은 @click="자바스크립트" 로 사용하면 된다.
이 때 신고수는 중요 데이터니까 밑에 정의해주자.
export default {
name: 'App',
data() {
return {
신고수 : 0,
메뉴들 : ['Home', 'Shop', 'About'],
products : ['역삼동원룸', '천호동원룸', '마포구원룸']
}
},
components: {
}
}
--> 신고수를 숫자로 정의하고
<div>
<h4>{{ products[0] }}</h4>
<p>50 만원</p>
<button @click="신고수++">허위매물신고</button> <span>신고수 : {{ 신고수 }}</span>
</div>
--> 허위매물신고 버튼을 클릭하면 신고수가 증가하도록 설정하면 끝!
데이터가 변하면 관련된 HTML은 자동으로 바뀐다. (뷰의 자동 랜더링 기능)
* click이외의 mouseover, blur, drag 등등 다양한 이벤트가 있다.
* 입력할 자바스크립트가 너무 길어지면 밑에 함수를 정의해서 사용하면 된다.
ex)
export default {
name: 'App',
data() {
return {
신고수 : 0,
메뉴들 : ['Home', 'Shop', 'About'],
products : ['역삼동원룸', '천호동원룸', '마포구원룸']
}
},
methods : {
increase() {
this.신고수++;
}
},
components: {
}
}
--> 이렇게 methods : {}안에 increase()라는 함수를 만들고,
(참고 : 함수 안에서 데이터를 쓸 땐 this.데이터명으로 써야한다.)
<div>
<h4>{{ products[0] }}</h4>
<p>50 만원</p>
<button @click="increase">허위매물신고</button> <span>신고수 : {{ 신고수 }}</span>
</div>
--> @click="함수명" 이렇게 사용하면 된다. 이 때 () 괄호는 쓰지 않는다!