반응형
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<script src="js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 버튼 클릭하면 클릭 횟수 증가 -->
<div>
클릭 횟수 : <span>{{cnt}}</span>번 입니다.
<button @click = "plusCnt">클릭!</button>
</div>
<!-- 버튼 클릭하면 알람창 뜬 후 배경색 변경 -->
<div id="text">
버튼 이벤트2
<button @click="fnAlert">클릭!</button>
</div>
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#app',
data: {
cnt : 0
}, methods: {
plusCnt : function() {
this.cnt++;
},
fnAlert : function() {
alert("안녕하세요");
document.getElementById("text").style.backgroundColor = "pink";
}
}
, created: function () {
}
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<script src="js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- input 창에 입력한 text가 '추가' 버튼을 누르면 출력되도록 하기
그 다음 text을 input 창에 입력하면 기존 text 와 이어서 출력되도록 하기 -->
<div id="app">
<input type="text" v-model="txt" @keyup.enter="fnclick">
<button @click="fnclick">추가</button>
<div>{{board}}</div>
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#app',
data: {
board : "",
txt : ""
}, methods: {
fnclick : function() {
this.board = this.board + this.txt;
this.txt = "";
}
}
, created: function () {
}
});
</script>
반응형
'Java Script > Vue.js' 카테고리의 다른 글
| [Vue] Vue 복습문제 - 추가, 삭제 #0417수업 #4교시 (0) | 2023.04.17 |
|---|---|
| [Vue] Vue 복습문제 - 검색, 체크박스, 삭제 #0417수업 #2교시 (0) | 2023.04.17 |
| [Vue] #0414수업 #8교시 (0) | 2023.04.14 |
| [Vue] v-for #0414수업 #7교시 (0) | 2023.04.14 |
| [Vue] #list #map #0414수업 #6교시 (0) | 2023.04.14 |