VUE/VUE연습
Vue 이벤트 핸들러로 click 감지하기 (허위매물 신고버튼 만들기)
미눅스[멘토]
2023. 8. 14. 22:55
728x90
<button @click="신고수++">허위매물신고</button><span> {{신고수}}</span>
버튼 눌렀을 때 자바스크립트 실행하려면
전통방식은 onclick=""
Vue방식은 v-on:click=""
v-on생략은(v-on: 의 약자 = @) @click=""
Vue에서 함수 만들고 싶으면
MEthods : {함수(){}}안에 만들면 된다
export default {
name: 'App',
data(){ //여기가 데이터 보관함
return {
신고수 : 0,
메뉴들 : ['Home','Shop','About'],
products : ['역삼동원룸','천호동원룸','마포구원룸'],
products2 : [50,'가격은아무거나',100],
}
},
methods : {
increase(){
//신고수 += 1; 함수안에서 데이터를 사용할떈 반드시 this.데이터명 을 써야한다.이것은 오류
this.신고수 += 1;
}
},
components: {
}
}
사용법은
함수명 그냥 그대로 불러와서 사용하면된다.
<button @click="increase">허위매물신고</button><span> {{신고수}}</span>
오늘의 숙제
<template>
<div class="menu">
<a v-for="작명 in 메뉴들" :key="작명" >{{ 작명 }}</a>
<a v-for="작명 in 3" :key="작명" >{{ 작명 }}</a>
<a v-for="(a,i) in 메뉴들" :key="i" >{{ i }}</a>
</div>
<div v-for="(i,v) in products" :key="i">
<h4>{{i}}</h4>
<p>{{products2[v]}} 만원</p> <!--데이터 보관함에 자료 이름으로 불러온다 {price1 : 60}-->
<button @click="increase(v)">허위매물신고</button><span> {{신고수[v]}}</span>
</div>
</template>
<script>
export default {
name: 'App',
data(){ //여기가 데이터 보관함
return {
신고수 : [0,0,0],
메뉴들 : ['Home','Shop','About'],
products : ['역삼동원룸','천호동원룸','마포구원룸'],
products2 : [50,'가격은아무거나',100],
}
},
methods : {
increase(v){
//신고수 += 1; 함수안에서 데이터를 사용할떈 반드시 this.데이터명 을 써야한다.이것은 오류
this.신고수[v] += 1;
}
},
components: {
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.menu{
background : darkslateblue;
padding: 15px;
border-radius : 5px;
}
.menu a{
color: white;
padding: 10px;
}
</style>
결과
