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 this指针
Jul 30 Javascript
jquery 打开窗口返回值实现代码
Mar 04 Javascript
javascript中的this详解
Dec 08 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
Vue实现简单的留言板
Oct 23 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和ACCESS写聊天室(六)
2006/10/09 PHP
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
js代码实现微博导航栏
2015/07/30 PHP
PHP代码优化技巧小结
2015/09/29 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
jQuery 操作XML入门
2008/12/25 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
python hash每次调用结果不同的原因
2019/11/21 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
机关门卫制度
2014/02/01 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python