我们把星级评价单独做成一个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