vue 实现的评分小星星组件，包括半星

github源码地址：https://github.com/13476075014/node-vue/blob/master/mynodeproject/13.sell/sell/src/components/star/star.vue

 

一：实现的思路：

　　通过评分的分数，来算出高亮的全星有几颗，有没有半星，灰色星星有几颗，通过背景图片实现，例如：

　　　　评分 ： 4.6 分 

　　　　四舍五入计算把分数换算成0.5的倍数：Math.floor( 4.6 *2 ) / 2   等于 4.5

　　　　把星星放到数组 arr_star 里面：

　　　　　　是否需要半星  var half = 4.5 % 1 != 0 ?  true :false    //能被1取余整数的话就不需要半星为false,否则是true

　　　　　　把全星push到数组里面   for ( var i = 0; i< Math.floor( 4.5) ;i++ ) {  arr_star.push( "on")  }  //on是星星高亮的图片名字

　　　　　　把半星放到数组里面  if( half ) { arr_star.push( "half" ) }  //half是半星图片的名字

　　　　　　把灰色星星放到数组里面  if( arr_star.length < 5) { 

　　　　　　　　　　　　　　　　　　　　for( var i=0;i<(5-arr_star.length) ; i++ ){  arr_star.push( "off" ) }   //off是灰色星星的名字

二：具体实现代码：

　　2.1 html部分：

　　　　

<template>
  <div class="star">
    <span v-for="(item,index) in itemClasslass" class="star-item" :key="index" :class="item">span>
  div>
template>

　　2.2 js部分

　　2.3 css部分

三：具体效果：

　　

转载于:https://www.cnblogs.com/chun321/p/9456663.html