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 异步方法队列链实现代码分析
Jun 05 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 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
使用 php4 加速 web 传输
2006/10/09 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
python获得一个月有多少天的方法
2015/06/04 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
python机器人运动范围问题的解答
2019/04/29 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
python3中for循环踩过的坑记录
2020/12/14 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
大学毕业通用个人的求职信
2013/12/08 职场文书
电力培训心得体会
2014/09/02 职场文书
留学推荐信中文范文
2015/03/26 职场文书
最美乡村教师观后感
2015/06/11 职场文书