vue实现一个星级打分效果_Vue实现星级评价效果实例详解

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

初始Star.vue

{ { score }}

export default {

name: 'Star',

props: {

score: Number

}

}

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

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

.star-item.on {

background-image: url(./img/star24_on@2x.png);

}

.star-item.half {

background-image: url(./img/star24_half@2x.png);

}

.star-item.off {

background-image: url(./img/star24_off@2x.png);

}

接下来修改Star.vue的代码

class="star-item"

v-for="(