星星评分系统代码模板。

这里使用星星评分的位置是header组件，以此为例。
header.vue中代码，无关代码已经省略。

<template>
    <div class="detail-wrapper clearfix">
        <div class="detail-main">
            <h1 class="detail-name">{{seller.name}}h1>
            <star :size="48" :score="seller.score">star>//引入star组件,并传入参数size和score
        div>
    div>
template>
<script type='text/ecmascript-6'>
import star from '../star/star'
    components: {
        star//ES6缩写，实际为'star': star
    },
script>

star.vue中的内容：

<template>
  <div class="star" :class="starType">//starType表示不同星星尺寸下的类，这里因为有3种星星尺寸。
    <span v-for="(itemClass,index) of itemClasses" :key="index" :class=itemClass class="star-item">span>
    //itemClass表示一颗星的状态，itemClasses表示这个状态数组的合计，通过v-for遍历来实现此功能。star-item用于设置样式。
  div>
template>

<script type='text/ecmascript-6'>
const LENGTH = 5//常量定义便于以后的代码扩展，例如10星等。
const CLS_ON = 'on'
const CLS_HALF = 'half'
const CLS_OFF = 'off'
export default {
  props: {
    size: {//size从父组件header里面传入，决定尺寸
      type: Number
    },
    score: {//score从父组件header里面传入，决定星星数量
      type: Number
    }
  },
  data () {
    return {
    }
  },

  components: {},
  computed: {
    starType () {
      return 'star-' + this.size//返回starType的值，表示不同尺寸下的star类。star类与size相关联。
    },
    itemClasses () {
      let result = []
      let score = Math.floor(this.score * 2) / 2
      let hasDecimal = score % 1 !== 0//判断是否有半星
      let integer = Math.floor(score)
      for (let i = 0; i < integer; i++) {
        result.push(CLS_ON)
      }
      if (hasDecimal) {//判断是否有半星，hasDecimal存在则有，不存在则无。
        result.push(CLS_HALF)
      }
      while (result.length < LENGTH) {//如果不足5颗实星，剩余的位置补上off星星。
        result.push(CLS_OFF)
      }
      return result
    }
  },

  methods: {}
}

script>
<style lang='stylus' rel='stylesheet/stylus'>
@import '../../common/stylus/mixin.styl'
.star
  font-size: 0
  .star-item
    display: inline-block
    background-repeat: no-repeat
  &.star-48
    .star-item
      margin-right: 22px
      width: 20px
      height: 20px
      background-size: 20px 20px
      &.last-child
        margin-right: 0
      &.on
        bg-image('star48_on')
      &.half
        bg-image('star48_half')
      &.off
        bg-image('star48_off')
  &.star-36
    .star-item
      margin-right: 6px
      width: 15px
      height: 15px
      background-size: 15px 15px
      &.last-child
        margin-right: 0
      &.on
        bg-image('star36_on')
      &.half
        bg-image('star36_half')
      &.off
        bg-image('star36_off')
  &.star-24
    .star-item
      margin-right: 3px
      width: 10px
      height: 10px
      background-size: 10px 10px
      &.last-child
        margin-right: 0
      &.on
        bg-image('star24_on')
      &.half
        bg-image('star24_half')
      &.off
        bg-image('star24_off')
style>

记得提前将对应图片当道组件所在文件夹中便于就近维护。

mixin.styl中的自适应背景图代码为：

bg-image($url)
  background-image: url($url+"@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(-min-device-pixel-ratio: 3)
    background-image: url($url+"@3x.png")