[Vue.js] 별점구현하기

 

 

클론코딩에 필요하여 이것저것 미리 만들어보는 중!

원래는 빈 별, 채워진 별 이미지로 구현하지만... 우선 급한대로 이모티콘으로 구현했다.

 

 

<template>
  <div class="inner">
    <div class="star-rating">
      <div
        class="star"
        v-for="index in 5"
        :key="index"
        @click="check(index)"
      >
        <span v-if="index < score">🍎</span>
        <span v-if="index >= score">🍏</span>
      </div>
    </div>
  </div>
</template>

 

<script>
export default {
  name: "Star",
  data() {
    return {
      score: 0,
    };
  },
  methods: {
    check(index) {
      this.score = index + 1;
    },
  },
};
</script>

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.