根据评分显示星星个数(全星、半星、空星)

   思路:将评分转换成数组,根据数组1,0.5,0来判断显示什么内容
   
    let arr=[];
    let m=Math.floor(this.score);  //整数部分
    let n=this.score-m;  //小数部分
    
	方式一:
	  
	for(let i=0;i<m;i++)  //全星
    {
      arr.push(1);
    }

    if(n>=0.5) //最多出现一个半星
    {
      arr.push(0.5);
    }

    while(arr.length<5) //空星
    {
      arr.push(0);
    }

    console.log(arr);
    return arr;

     
	方式二:

     if(n<0.5)  // 小数部分<0.5的情况
     {
      for(let i=0;i<5;i++)
      {
        if(i<=(this.score-1))
        {
          arr.push(1);
        }else {
          arr.push(0);
        }
      }
     }else{ //小数部分>=0.5的情况
       for(let i=0;i<5;i++)
       {
         if(i<m)
         {
           arr.push(1);
         }else if(i==m) {
           arr.push(0.5);
         }else{
           arr.push(0);
         }
       }
     }

    console.log(arr);
    return arr;

效果:
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的 Vue 星级评分组件的实现: ```html <template> <div class="rating"> <span v-for="(star, index) in stars" :class="['star', star]" :key="index" @click="select(index)"> </span> </div> </template> <script> export default { props: { value: { type: Number, default: 0 }, max: { type: Number, default: 5 } }, data() { return { stars: [] } }, mounted() { this.updateStars() }, methods: { updateStars() { this.stars = [] for (let i = 0; i < this.max; i++) { this.stars.push(i < this.value) } }, select(index) { this.value = index + 1 this.$emit('input', this.value) this.updateStars() } } } </script> <style> .star { display: inline-block; width: 24px; height: 24px; background: url(star.png) no-repeat; background-size: contain; cursor: pointer; } .star:hover, .star.active { background-position: 0 -24px; } </style> ``` 使用方式: ```html <template> <div> <h3>我的评分:{{ rating }}</h3> <star-rating v-model="rating"></star-rating> </div> </template> <script> import StarRating from './StarRating.vue' export default { components: { StarRating }, data() { return { rating: 3 } } } </script> ``` 其中,star.png 是一张包含两个星星的图片,第一个星星是默认状态,第二个星星是激活状态。 这个组件的实现很简单,通过 props 接收评分值和最大值,然后用一个数组来表示星星的激活状态,点击某个星星时更新评分值和星星状态,通过事件向父组件传递更新后的评分值。最后,用 CSS 来实现星星的样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值