Vue 이벤트 핸들러로 click 감지하기 (허위매물 신고버튼 만들기)

 

 <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>

 

 

결과