ㅁ 버튼 이벤트 핸들러
<template>
<div>
<h1>수박</h1>
<h2>1만원</h2>
</div>
<button @click="">과일구매</button>
<div>구매개수 : 0</div>
</template>
ㅁ 버튼 이벤트 생성
<button v-on:click="">과일 구매</button>
or
<button @click="">과일 구매</button>
ㅁ 버튼 클릭에 따라서 버튼수 저장 변수
<script>
export default {
name: 'App',
data() {
return {
과일개수 : 0,
}
},
components: {
}
}
</script>
ㅁ 버튼 이벤트 클릭 했을때 버튼 수량 증가++
<button @click="과일개수++">과일구매</button> <!-- ++ 증가 -->
<div>과일구매수량 : {{과일개수}}</div>
or
<button @click="과일개수 += 1">과일구매</button>
<div>과일구매수량 : {{과일개수}}</div>
ㅁ 함수 만들어서 버튼 이벤트 사용가능(응용)
ㅇ 함수 : 긴코드를 짧은 단어로 축약 할수 있다.
<button @click="increase">과일구매</button> <!-- increase 함수 이름 -->
<div>과일구매수량 : {{과일개수}}</div>
ㅁ 함수등록
<script>
export default {
name: 'App',
data() {
return {
과일개수 : 0,
}
},
methods: { // Vue에서 함수는 여기다 만듬
increase(){ // 함수 이름 작명
this.과일개수 += 1;
},
함수2(){
},
함수3(){
},
},
components: {
}
}
</script>
ㅁ 여러개 버튼사용(응용)
<template>
<div>
<h1>수박</h1>
<h2>1만원</h2>
</div>
<button @click="과일구매개수[0] += 1">과일구매</button>
<div>과일구매수량 : {{과일구매개수[0]}}</div>
<div>
<h1>딸기</h1>
<h2>2만원</h2>
<button @click="과일구매개수[1] += 1">과일구매</button>
<div>과일구매수량 : {{과일구매개수[1]}}</div>
</div>
<div>
<h1>멜론</h1>
<h2>2만원</h2>
<button @click="과일구매개수[2] += 1">과일구매</button>
<div>과일구매수량 : {{과일구매개수[2]}}</div>
</div>
<br>
</template>
<script>
export default {
name: 'App',
data() {
return {
과일개수 : 0,
과일구매개수 : [0, 0, 0],
}
},
methods: { // Vue에서 함수는 여기다 만듬
increase(){ // 함수 이름 작명
this.과일개수 += 1;
},
},
components: {
}
}
</script>
'Frame-Work > Vue-JS' 카테고리의 다른 글
6. Vue js - 데이터 가져오기 내보내기(import / export) - feat v-for (0) | 2021.05.27 |
---|---|
5. Vue js - v-if(조건식) (0) | 2021.05.27 |
3. Vue js - v-for 반복문 - 리스트 렌더링 (0) | 2021.04.27 |
2. Vue js - HTML 태그 안에 데이터 바인딩 (0) | 2021.04.23 |
1. vue js 설치, 실행, 프로젝트 생성, IE실행(Vue2, Vue3는 IE실행 안됨) (0) | 2021.04.23 |
댓글