4. 이벤트 핸들러로 click이벤트 생성

Vue 이벤트 핸들러로 click 감지하기

• 태그에 v-on:click="실행코드" 또는 @click="실행코드"로 이밴트 생성
• click 외에 여러가지 동작 감지 가능
• 실행코드는 태그에 바로 작성 또는 함수로 연결 가능

// 데이터와 함수
export default {
  name: 'App',
  data(){
    return {
      price : [60,70,80],
      fweight : "font-weight:bold",
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      신고수 : [0,0,0], //신고수 버튼이 3개라 각각 수를 저장하기 위해 배열로 구조
    }
  },
  methods : { //함수 만드는 공간
    countbtn0(){
      this.신고수[0] ++ //오브젝트 안의 데이터를 끌어오려면 같은 부모 안에 있어서 this.데이터명 으로 지정
    },
    countbtn1(){
      this.신고수[1] += 1
    },
    countbtn2(){
      this.신고수[2] = this.신고수[2] + 1
    }
  },
  components: {    
  }
}

---

<div>
  <h4 :style="fweight">{{products[0]}}</h4>
  <p>{{price[0]}} 만원</p>
  <button v-on:click="countbtn0">허위매물신고</button> <span>신고수 : {{신고수[0]}}</span> 
  <!-- v-on:click은 @click으로 표션 가능-->
</div>
<div>
  <h4 :style="fweight">{{products[1]}}</h4>
  <p>{{price[1]}} 만원</p>
  <button v-on:click="countbtn1">허위매물신고</button> <span>신고수 : {{신고수[1]}}</span>
</div>
<div>
  <h4 :style="fweight">{{products[2]}}</h4>
  <p>{{price[2]}} 만원</p>
  <button v-on:click="countbtn2">허위매물신고</button> <span>신고수 : {{신고수[2]}}</span>
</div> 

 

 

 

 

코딩애플 강의로 실습한 내용입니다
출처 : https://codingapple.com/