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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 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操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
checkbox使用示例
2013/08/23 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
Python中random模块用法实例分析
2015/05/19 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
Python中Class类用法实例分析
2015/11/12 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
python数据结构之列表和元组的详解
2017/09/23 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python生成lmdb格式的文件实例
2018/11/08 Python
python 制作简单的音乐播放器
2020/11/25 Python
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
教师自我鉴定
2013/12/13 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
介绍信格式样本
2015/05/05 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
护士心得体会范文
2016/01/25 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android