vue中利用星星表示电影评分

我主要是动态绑定星星的宽度来进行操作，

<template>
  <div class="rank">
    <div class="star">
      <div class="greyStar" :style="{width:width + 'px'}"></div>
      <div class="lightStar"></div>
    </div>
    <div class="num">
      <span class="rank1">{
  {rank1}}</span>{
  {rank2}}
    </div>
  </div>
</template>
<script>
  export default {
    name: "Star",
    data(){
      return{
        width:80,    //这里可以改变宽度来进行星星亮的范围
        rank1:"8",
        rank2:".0"
      }
    }
  }
</script>
<style scoped>
  .rank{
    width:100%;
  }
  .star{
    width:100px;
    height: 16px;
    position: relative;
    display: inline-block;
  }
  .greyStar{

    height: 16px;
    background-image: url(//dn-piaoniu-static.qbox.me/pc/ui/img/star-ful