[코딩애플] Vue 로 만드는 직방 / 인스타그램 웹앱 - 클론코딩.4

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>