728x90
반응형
https://www.youtube.com/watch?v=Agm-F366ZwY&list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ-&index=5
- 이벤트 핸들 -> HTML 클릭시 코드 실행하는 법
- click
<button v-on:click="">허위매물 신고</button><span>신고수 : 0 </span>
이렇게 쓰거나 축약해서
<button @click="">허위매물 신고</button><span>신고수 : 0 </span>
이렇게 쓴다
<button @click="신고수++">허위매물 신고</button><span>신고수 : {{ 신고수 }} </span>
=> 최종
<template>
<div class="menu">
<a v-for="(a,i) in 메뉴들" :key="i">{{ a }}</a>
</div>
<div>
<h4>{{products[0]}}</h4>
<p> 50만원</p>
<button @click="increase">허위매물 신고</button><span>신고수 : {{ 신고수 }} </span>
</div>
<div>
<h4>{{products[1]}}</h4>
<p> 70만원</p>
</div>
<div>
<h4>{{products[2]}}</h4>
<p> 70만원</p>
</div>
<!-- <div v-for="dong in products" :key="dong">
<div>
<h4>{{ dong }}</h4>
<p v-if="i == 0">50만원</p>
<p v-else>가격은아무거나</p>
</div>
</div>-->
</template>
<script>
export default {
name: 'App',
data(){
return{
신고수 : 0,
메뉴들 : ['Home', 'Shop', 'About'],
products: ['역삼동원룸', '천호동원룸', '마포구원룸']
}
},
methods:{
increase(){
this.신고수++;
}
},
components: {
}
}
</script>
- mouseover
<button @mouseover="신고수++">허위매물 신고</button><span>신고수 : {{ 신고수 }} </span>
728x90
반응형
'클론코딩' 카테고리의 다른 글
[코딩애플] Vue 로 만드는 직방 / 인스타그램 웹앱 - 클론코딩.6 (0) | 2025.02.28 |
---|---|
[코딩애플] Vue 로 만드는 직방 / 인스타그램 웹앱 - 클론코딩.5 (0) | 2025.02.28 |
[코딩애플] Vue 로 만드는 직방 / 인스타그램 웹앱 - 클론코딩.3 (0) | 2025.02.28 |
[코딩애플] Vue 로 만드는 직방 / 인스타그램 웹앱 - 클론코딩.2 (0) | 2025.02.28 |
[코딩애플] Vue 로 만드는 직방 / 인스타그램 웹앱 - 클론코딩.1 (0) | 2025.02.28 |