vue.js click 이벤트

   <button v-on:click="">허위매물신고</button><span> 신고수 : 0</span>
     <button @click="">허위매물신고</button><span> 신고수 : 0</span> --- 축약형

 

export default {
  name: 'App',
  data(){
    return {
      신고수 : 0,
      products: ['역삼동원룸','천호동원룸','마포구원룸'],
      메뉴들 : ['Home','Shop', 'About'],
    }
  },
  components: {
    
  }
}

...

  <button @click="신고수++">허위매물신고</button><span> 신고수 : {{ 신고수 }}</span>

 

버튼을 누를 때마다 신고수가 1씩 증가한다. 랜더링이기에 다시 html을 뿌리거나 하지 않아도 됌

 

@click뿐 아니라 @mouseover, @change 등 자유롭게 사용이 가능하다.

 

<script>

export default {
  name: 'App',
  data(){
    return {
      신고수 : 0,
      products: ['역삼동원룸','천호동원룸','마포구원룸'],
      메뉴들 : ['Home','Shop', 'About'],
    }
  },
  methods : {
    increase(){
      this.신고수 += 1;
    }
  },
  components: {
    
  }
}
</script>

  <button @click="increase()">허위매물신고</button><span> 신고수 : {{ 신고수 }}</span>

 

이렇게 함수를 만들 수 있다 (javascript의 function 느낌)

 

return안의 값을 쓰고 싶다면 this를 붙여줘야한다.