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实用技巧(一)
Aug 16 Javascript
JavaScript中的类继承
Nov 25 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
js中Array对象的常用遍历方法详解
Jan 17 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 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的聊天室设计
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
PHP 缓存实现代码及详细注释
2010/05/16 PHP
PHP STRING 陷阱原理说明
2010/07/24 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
JAVASCRIPT对象及属性
2007/02/13 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
使用python实现接口的方法
2017/07/07 Python
Python检测网络延迟的代码
2018/05/15 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
采用怎样的方法保证数据的完整性
2013/12/02 面试题
护理专业毕业生自荐信范文
2014/01/05 职场文书
班级课外活动总结
2014/07/09 职场文书
建筑横幅标语
2014/10/09 职场文书
职称评定个人总结
2015/03/05 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
浅析JavaScript中的变量提升
2022/06/01 Javascript