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


Posted in Javascript onNovember 16, 2018

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)?true:false;
//       有多少课灰色的星星
        for (var i=0;i<onstar;i++) {
          starArr.push('onstar')         
        }
        if(halfStar){
          starArr.push('halfstar')          
        }
        while(starArr.length<5){
          starArr.push('offstar') 
        }
        return starArr;
      }
    }
  }
</script>
<style scoped="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实现简单的星级评分组件源码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 隔行换色函数代码
Oct 24 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
JavaScript的console命令使用实例
Dec 03 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 #Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 #Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 #Javascript
layDate插件设置开始和结束时间
Nov 15 #Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 #Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 #Javascript
layDate日期控件使用方法详解
Nov 15 #Javascript
You might like
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
php实现aes加密类分享
2014/02/16 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
js实现点击烟花特效
2020/10/14 Javascript
python cookielib 登录人人网的实现代码
2012/12/19 Python
python提取页面内url列表的方法
2015/05/25 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
python global关键字的用法详解
2019/09/05 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
苹果美国官方商城:Apple美国
2016/08/24 全球购物
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
学前教育毕业生自荐信范文
2013/12/24 职场文书
消防安全检查制度
2014/02/04 职场文书
高中生的自我评价
2014/03/04 职场文书
春节超市活动方案
2014/08/14 职场文书
2015年林业工作总结
2015/05/14 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
安全生产奖惩制度
2015/08/06 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang