ETC/Vue.js
v-on 이벤트 처리
java나유
2022. 12. 23. 00:44
https://www.w3schools.com/html/default.asp
HTML Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
HTML
CSS
JAVASCRIPT
SQL
PHP
BOOTSTRAP 등을
잘 설명한 사이트 이다.
v-on 메소드는 해당 이벤트태그에서 'on'을 제거하고 사용하면 된다.
간단한 이벤트 처리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.in {
background-color : red;
color : yellow;
}
.out {
background-color : yellow;
color : red;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script>
window.onload = function(){
var vm1 = new Vue({
el : '#test1',
data : {
data1 : 0,
data2 : 0,
result1 : 0,
inOutCss : 'out'
},
methods : {
btnEvent : function(){
alert('버튼을 눌렀습니다')
},
imageEvent : function(){
alert('image click event')
},
addNumber : function(){
this.result1 = this.data1 + this.data2
},
inEvent : function(){
this.inOutCss = 'in'
},
outEvent : function(){
this.inOutCss = 'out'
}
}
})
}
</script>
</head>
<body>
<div id="test1">
<button type='button' v-on:click='btnEvent'>버튼</button>
<button type='button' @click='btnEvent'>버튼</button>
<br/>
<img src='./img/logo.png' width='200' @click='imageEvent'/><br/>
<hr/>
data1 : <input type='number' v-model.number='data1'/><br/>
data2 : <input type='number' v-model.number='data2'/><br/>
<button type='button' @click='addNumber'>숫자 더하기</button>
<h3>결과 : {{result1}}</h3>
<h3 v-bind:class='inOutCss' @mouseenter='inEvent' @mouseleave='outEvent'>문자열</h3>
</div>
</body>
</html>
data1 :
data2 :
결과 : {{result1}}
문자열
728x90