[Vue] 별점 컴포넌트 만들기

v-model
v-for

<template>
  <div class="star-rating">
    <ul>
      <li v-for="n in repeatCount" :key="n">
        <img :src="imageURL" :alt="imageAlt" />
      </li>
    </ul>
  </div>
</template>
<script>
import starImage from '@/assets/icons/star/star.svg';

export default {
  data() {
    return {
      repeatCount: 5, // 반복할 횟수
      imageURL: starImage, // 반복할 이미지의 URL
      imageAlt: 'Repeated Image' // 이미지의 설명
    }
  }
}
</script>
<style lang="scss" scoped>
  .star {
    width: 24px;
  }
</style>

<template>
  <div class="star-rating">
    <ul class="star-list">
      <li class="star"
        v-for="n in repeatCount" :key="n" >
        <img :src="imageURL" :alt="imageAlt" />
      </li>
    </ul>
  </div>
</template>

<script>
import starImage from '@/assets/icons/star/star.svg';

export default {
  data() {
    return {
      repeatCount: 5, // 반복할 횟수
      imageURL: starImage, // 반복할 이미지의 URL
      imageAlt: 'Repeated Image' // 이미지의 설명
    }
  }
}
</script>

<style lang="scss" scoped>
  .star-rating .star-list {
    background-color: aqua;
    display: inline-flex;
  }

  .star {
    background-color: blue;
  }
</style>