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 相关文章推荐
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
webpack打包多页面的方法
Nov 30 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
Vue中keep-alive组件的深入理解
Aug 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中output_buffering
2015/07/13 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
javascript函数库-集合框架
2007/04/27 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
canvas时钟效果
2017/02/16 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
js使用formData实现批量上传
2020/03/27 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
Django celery异步任务实现代码示例
2020/11/26 Python
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
PyQt 如何创建自定义QWidget
2021/03/24 Python
工商管理毕业生推荐信
2013/12/24 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
会议邀请函
2015/01/30 职场文书
2015年卫生局工作总结
2015/07/24 职场文书