4. 이벤트 핸들러와 함수 만들기

https://youtu.be/Agm-F366ZwY

JS의 onClick 대신 vue는 v-on:click을 쓰면 된다.

v-on:은 @로 치환이 된다.

 

<template>
  <div class="menu">
    <a v-for="(작명, i) in menus" :key="i">{{ 작명 }}</a>
  </div>
  <div v-for="(p, i) in list" :key="i">
    <h4>{{ p.원룸명 }}</h4>
    <p>{{ p.가격 }} 만원</p>
    <button @click="alerts++">허위매물신고</button>
    <span>신고수 : {{ alerts }} </span>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      alerts: 0,
      menus: ['Home', 'Shop', 'About'],
      list: [
        { 원룸명: '역삼동원룸', 가격: 50 },
        { 원룸명: '천호동원룸', 가격: 100 },
        { 원룸명: '마포구원룸', 가격: 150 },
      ],
    };
  },
  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>

 

Vue에서 함수 만드는 법

<template>
  <div class="menu">
    <a v-for="(작명, i) in menus" :key="i">{{ 작명 }}</a>
  </div>
  <div v-for="(p, i) in list" :key="i">
    <h4>{{ p.원룸명 }}</h4>
    <p>{{ p.가격 }} 만원</p>
    <button @click="alert_increase">허위매물신고</button>
    <span>신고수 : {{ alerts }} </span>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      alerts: 0,
      menus: ['Home', 'Shop', 'About'],
      list: [
        { 원룸명: '역삼동원룸', 가격: 50 },
        { 원룸명: '천호동원룸', 가격: 100 },
        { 원룸명: '마포구원룸', 가격: 150 },
      ],
    };
  },
  methods: {
    alert_increase() {
      this.alerts += 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>

<script> 영역에 

methods: {
	함수이름() {
    	함수 내용 ~~~~ ;
    },
}

과 같이 함수를 만들고 template에서 가져다 쓸 때는 ()없이 함수이름만 넣어서 쓰면 된다.

그리고 함수 안에 데이터바인딩하고 싶은 변수명을 가져다 쓸 때는 this.변수명을 해줘야 제대로 인식한다.

 

신고수 따로따로 적용되게 만들기

신고수 배열을 따로 만들어서 반복문 돌림.

<template>
  <div class="menu">
    <a v-for="(작명, i) in menus" :key="i">{{ 작명 }}</a>
  </div>
  <div v-for="(p, i) in list" :key="i">
    <h4>{{ p.원룸명 }}</h4>
    <p>{{ p.가격 }} 만원</p>
    <button @click="alerts[i]++">허위매물신고</button>
    <span>신고수 : {{ alerts[i] }} </span>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      alerts: [0, 0, 0],
      menus: ['Home', 'Shop', 'About'],
      list: [
        { 원룸명: '역삼동원룸', 가격: 50 },
        { 원룸명: '천호동원룸', 가격: 100 },
        { 원룸명: '마포구원룸', 가격: 150 },
      ],
    };
  },
  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>