Vue实现星级评价效果

我们把星级评价单独做成一个Star组件，抽离出来，其中父组件中引入(传入的是评分的值)

<div class="score">
    <Star :score="poiInfo.wm_poi_score"></Star>
</div>

初始Star.vue

<template>
  <div>
      <div class="star">
          <span class="star-item"></span>
      </div>
      <span>{
  { score }}</span>
  </div>
</template>
<script>
export default {
    name: 'Star',
    props: {
        score: Number
    }
}
</script>

首先我们把要做星级图片用类名为star-item的span标签循环出来，星级图片有三张，全星，半星，空星

下面只罗列关键的css部分, 通过增加类区分图片

.star-item.on {
   
    background-image: url