DDR爱好者之家

vue实现简单的星级评分组件源码
站长资源 2025/10/24 佚名
75 1538
DDR爱好者之家 Design By 杰米

vue星级评分组件源码，具体代码如下所示：

<!--自定义组件-->
<template>
  <!--结构层-->
    <div id="star">
      <span v-for="classn in starArrs" :class="classn" class="staritem"></span>
      <!--<span class="staritem onstar"></span>
      <span class="staritem onstar"></span>
      <span class="staritem halfstar"></span>
      <span class="staritem offstar"></span>-->
      <!--根据传递过来的分数得到对应的星星
        4.7   四颗半星
        1个位数代表的是全里亮，
        2，当分数大于等于0.5 是一个半星
        3.当全星和半星不足五个的时候，剩下的都是灰色的星星
      -->
    </div>
</template>
<script>
// 行为
  export default{
    props:['score'],
    created(){
      console.log("子组件");
    },
    mounted(){
      console.log("打印传递的分数");
    },
    computed:{
      starArrs(){
        var starArr=[];  //3.9
//       全星星的个数
        let onstar = parseInt(this.score);
        console.log(onstar)
//       是否有半星
        let halfStar = Math.round(this.score-onstar)"scoped">
  /*独立作用域的样式*/
  .staritem{
    display: inline-block; 
    width: 0.37037rem;
    height: 0.37037rem;
  }
  /*全星星*/
  .onstar{
    background: url(./star24_on@2x.png);
    background-size: 0.37037rem;  
  }
  .halfstar{
    background: url('./star24_half@2x.png');
  }
  .offstar{
    background: url('./star24_off@2x.png');
  }
</style>

背景图

star24_on@2x.png 

vue实现简单的星级评分组件源码

star24_half@2x.png  

vue实现简单的星级评分组件源码

star24_off@2x.png

vue实现简单的星级评分组件源码

总结

以上所述是小编给大家介绍的vue实现简单的星级评分组件源码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米