<template>
  <div class="menu">
    <a v-for="element in menus" :key="element">{{element}}</a>
  </div>

  <img alt="Vue logo" src="./assets/logo.png">
  <div v-for="(a, i) in products" :key="i">
    <h4> {{ a }} 원룸 </h4>
    <p> {{ i }} 만원</p>
  </div>

  <button v-on:click="{{ 신고수++; }}">허위매물 신고</button>
  <span> 신고수 : {{ 신고수 }}</span>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      신고수 : 0,
      menus : ["Home", "Shop", "About"],
      products : ['first', 'second', 'third'],
    }
  },
  components: {
  }
}
</script>

• v-on:click 을 사용하면, vue 버전의 click 이벤트 핸들러 실행이 가능하다.

함수 만들기

• vue에서 함수를 만들 때, data를 사용하려면 this.(data명) 임에 주의한다.

<script>
export default {
  name: 'App',
  data() {
    return {
      신고수 : 0,
      menus : ["Home", "Shop", "About"],
      products : ['first', 'second', 'third'],
    }
  },
  methods: {
    increase() {
      this.신고수 += 1;
    }
  },
  components: {
  }
}
</script>

button v-on:click="increase">허위매물 신고</button>
<span> 신고수 : {{ 신고수 }}</span>

• 이처럼 하면 동일한 기능을 수행할 수 있다.

v-if

data() {
    return {
      isModalOpen: true,
      신고수 : 0,
      menus : ["Home", "Shop", "About"],
      products : ['first', 'second', 'third'],
    }
  },

• isModalOpen 과 같은 State를 담는다.

<div class="black-bg" v-if="isModalOpen == true">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세 페이지 내용</p>
    </div>
</div>

• v-if를 통해 해당 조건일 때만 display 되도록 조작할 수 있다.
  

• true 이기에 상세 페이지 HTML이 Display 된 것이다.

• 동적 UI 만들기에서 정석 Step 이다.