[Vue] 이벤트 핸들러 및 이미지 가져오기

 

이벤트 핸들러 

 

버튼을 클릭하면 코드 실행하기 

 

  <div>

    <h4>{{ products[0] }}</h4>

    <P>50 만원</P>

    <button>허위매물신고</button>

  </div>

 

이벤트 핸들러를 추가하기 위한 버튼을 추가한다.

 

@click 또는 v-on 

 

 

<script>

export default {

  name: "App",

  data() {

    return {

      신고수: 0,

      메뉴들: ["Home", "Shop", "About"],

      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],

    };

  },

  components: {},

};

</script>

 

신고수는 data()로 관리한다.

 

클릭이벤트에는 이렇게 

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

    <span>신고수 : {{ 신고수 }}</span>

 

 

 

버튼을 클릭하면 신고수가 증가한다. 

 

만약에 코드가 길어지면 보기 힘들기 때문에 함수로 만들어서 관리할 수 있다.

 

함수만들 때 주의 사항

 

<script>

export default {

  name: "App",

  data() {

    return {

      신고수: 0,

      메뉴들: ["Home", "Shop", "About"],

      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],

    };

  },

  methods: {

    increase() {

    신고수++;

    },

  },

  components: {},

};

</script>

 

    <button @click="increase">허위매물신고</button>

 

this를 붙여야 에러가 안

  methods: {

    increase() {

      this.신고수++;

    },

  },

 

 

그리고 각 항목당 버튼을 만들고 

 

각 항목 버튼을 클릭하면 그 항목의 신고수만 늘어나게하기

 

<template>

  <img alt="Vue logo" src="./assets/logo.png" />

  <div class="menu">

    <a v-for="(a, i) in 메뉴들" :key="i">{{ a }}</a>

  </div>

  <div>

    <h4>{{ products[0] }}</h4>

    <P>50 만원</P>

    <button @click="increase(0)">허위매물신고</button>

    <span>신고수 : {{ 신고수[0] }}</span>

  </div>

  <div>

    <h4>{{ products[1] }}</h4>

    <button @click="increase(1)">허위매물신고</button>

    <span>신고수 : {{ 신고수[1] }}</span>

    <P>70 만원</P>

  </div>

  <div>

    <h4>{{ products[2] }}</h4>

    <button @click="increase(2)">허위매물신고</button>

    <span>신고수 : {{ 신고수[2] }}</span>

    <P>80 만원</P>

  </div>

</template>

  methods: {

    increase(i) {

      this.신고수[i]++;

    },

  },

 

 

 

---

이미지 가져오기 

 

assets 폴더에 이미지들 저장하기 

 

 

 

 

 

  <div>

    <img src="./assets/room0.jpg" alt="" />

    <h4>{{ products[0] }}</h4>

    <P>50 만원</P>

    <button @click="increase(0)">허위매물신고</button>

    <span>신고수 : {{ 신고수[0] }}</span>

  </div>

 

 

이미지가 크기 때문에 사이즈를 조정할거임

 

    <img src="./assets/room0.jpg" class="room-img" />

 

room-img라는 클래스를 준다

 

<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

.menu {

  background: darkslateblue;

  padding: 15px;

  border-radius: 5px;

}

.menu a {

  color: white;

  padding: 10px;

}

.room-img {

  width: 100%;

  margin-top: 40px;

}

</style>