Vue动态怎么实现评分效果

Vue动态怎么实现评分效果

这篇文章主要介绍“Vue动态怎么实现评分效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue动态怎么实现评分效果”文章能帮助大家解决问题。

1.图片分为三种

on:half: off

<style>    .star{      font-size: 0;    }    .star-item{      display: inline-block;      background-repeat: no-repeat;      width: 20px;      height: 20px;      margin-right: 22px;      background-size: 100%;    }    .star-item.on{      background-image: url(img/on.png);    }    .star-item.half{      background-image: url(img/half.png);    }    .star-item.off{      background-image: url(img/off.png);    }  </style>

<div id="app">    <ul class="star">      <span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" track-by="index"></span><!--性能优化 track-by 数据不改变时不会重新渲染-->    </ul>  </div>

<script>    new Vue({      el: '#app',    　data:{      score: 4    },     computed:{ //计算属性      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("on");        }        if(hasDecimal){          result.push("half");        }        while(result.length < 5){          result.push("off");        }        return result;      }    }  })  </script>

关于“Vue动态怎么实现评分效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注高防服务器网行业资讯频道，小编每天都会为大家更新不同的知识点。

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[