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 相关文章推荐
var与Javascript变量隐式声明
Sep 17 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
微信小程序登录session的使用
Mar 17 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
微信小程序中的店铺评分组件及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+MYSQL开发工具及资源收藏
2007/01/02 PHP
php记录日志的实现代码
2011/08/08 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
jQuery div拖拽用法实例
2016/01/14 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
原生js实现分页效果
2020/09/23 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
python cookielib 登录人人网的实现代码
2012/12/19 Python
实例介绍Python中整型
2019/02/11 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
使用python计算三角形的斜边例子
2020/04/15 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
带薪年假请假条
2014/02/04 职场文书
技术合作协议书范本
2014/04/18 职场文书
科技之星事迹材料
2014/06/02 职场文书
安全例会汇报材料
2014/08/23 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
春节慰问信范文
2015/02/15 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
2015年推普周活动总结
2015/03/27 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
Django程序的优化技巧
2021/04/29 Python
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫
对讲机知识
2022/04/07 无线电