vue实现简单的星级评分组件源码

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

star24_half@2x.png

star24_off@2x.png

总结

以上所述是小编给大家介绍的vue实现简单的星级评分组件源码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件

    在微信小程序中,有遇到要展示店铺评分,或者是订单完成后对商品进行评价,用到了星星展示,查了下,在微信中无法使用svg实现图片,微信中只能将svg图片转成base64来显示,所以是在vue中使用的svg来实现评分 1.效果图 微信中的可以点击及显示,但是,显示的话,在4.2分,4点多分的时候,显示的是半颗星 vue中用的是svg实现,所以用的是占比的形式,可以有一点点的星 2.微信实现店铺评分显示及商品评价星星展示 子组件index.wxml,可以动态的控制星星的大小 <!-- (size * s

  • Vue动态实现评分效果

    Vue动态实现评分效果

    本文实例为大家分享了Vue动态实现评分效果的具体代码,供大家参考,具体内容如下 1.图片分为三种 on:half: off <style> .star{ font-size: 0; } .star-item{ display: inline-block; background-repeat: no-repeat; width: 20px; height: 20px; margin-right: 22px; background-size: 100%; } .star-item.on{ back

  • vue2.0实现前端星星评分功能组件实例代码

    下面给大家分享vue 2.0实现星星评分组件,代码很简单,一起看看吧! 废话不多说了,直接给大家贴代码了,具体代码如下所示: <template id="pingJia"> <div> <ul> <li :class="{li1:1,bg1:index%2}" v-for="(value,index) in list"><span class="stu_span1">

  • vue 实现类似淘宝星级评分的示例

    实例如下所示: <template> <div id="shoplist"> <p class="all" > <input type="radio" name="b" value="0" v-model="inputdata"/> <span>★</span> <input type="radio&

  • vue实现简单的星级评分组件源码

    vue实现简单的星级评分组件源码

    vue星级评分组件源码,具体代码如下所示: <!--自定义组件--> <template> <!--结构层--> <div id="star"> <span v-for="classn in starArrs" :class="classn" class="staritem"></span> <!--<span class="star

  • Vue的data、computed、watch源码浅谈

    导读 记得初学Vue源码的时候,在defineReactive.Observer.Dep.Watcher等等内部设计源码之间跳来跳去,发现再也绕不出来了.Vue发展了很久,很多fix和feature的增加让内部源码越来越庞大,太多的边界情况和优化设计掩盖了原本精简的代码设计,让新手阅读源码变得越来越困难,但是面试的时候,Vue的响应式原理几乎成了Vue技术栈的公司面试中高级前端必问的点之一. 这篇文章通过自己实现一个响应式系统,尽量还原和Vue内部源码同样结构,但是剔除掉和渲染.优化等等相关的代

  • Android 简单的图片查看器源码实现

    本文介绍了Android 简单的图片查看器源码实现,分享给大家,具体如下: public class MainActivity extends Activity { private EditText et_path; private ImageView iv; //创建handler 对象 // private Handler handler = new Handler(){ // // //处理消息 // public void handleMessage(android.os.Message

  • 浅析vue 函数配置项watch及函数 $watch 源码分享

    Vue双向榜单的原理 大家都知道Vue采用的是MVVM的设计模式,采用数据驱动实现双向绑定,不明白双向绑定原理的需要先补充双向绑定的知识,在watch的处理中将运用到Vue的双向榜单原理,所以再次回顾一下: Vue的数据通过Object.defineProperty设置对象的get和set实现对象属性的获取,vue的data下的数据对应唯一 一个dep对象,dep对象会存储改属性对应的watcher,在获取数据(get)的时候为相关属性添加具有对应处理函数的watcher,在设置属性的时候,触发

  • Phaser.js实现简单的跑酷游戏附源码下载

    采用的物理引擎是Phaser.js 官网地址:http://phaser.io/ 在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿) 效果展示: 源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone) 1.创建游戏舞台 var config = { type: Phaser.AUTO, width: 800, height: 400, physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug:

  • vue Proxy数据代理进行校验部分源码实例解析

    vue Proxy数据代理进行校验部分源码实例解析

    目录 initProxy 触发代理 数据过滤 总结 initProxy 数据拦截的思想除了为构建响应式系统准备,它也可以为数据进行筛选过滤,我们接着往下看初始化的代码,在合并选项后,vue接下来会为vm实例设置一层代理,这层代理可以为vue在模板渲染时进行一层数据筛选 Vue.prototype._init = function(options) { // 选项合并 ... { // 对vm实例进行一层代理 initProxy(vm); } ... } initProxy // 代理函数 var

  • 深入分析element ScrollBar滚动组件源码

    scrollbar组件根目录下包括index.js文件和src文件夹,index.js是用来注册Vue插件的地方,没什么好说的,不了解的童鞋可以看一下Vue官方文档中的插件,src目录下的内容才是scrollbar组件的核心代码,其入口文件是main.js. 在开始分析源码之前,我们先来说一下自定义滚动条的原理,方便大家更好的理解. 如图,黑色wrap为滚动的可显示区域,我们的滚动内容就是在这个区域中滚动,view是实际的滚动内容,超出wrap可显示区域的内容都将被隐藏.右侧track是滚动条的

  • jQuery插件-jRating评分插件源码分析及使用方法

    jQuery插件-jRating评分插件源码分析及使用方法

    该插件被广泛应用于各种需要评分的页面当中,今天作为学习,把源码拿出来分析一下,顺便学习其使用方法. 一.插件使用一览. 复制代码 代码如下: <div> <div>第一个例子</div> <div id="16_1" class="myRating"></div> </div> 复制代码 代码如下: <link href="Script/jRating/jRating.jquer

  • C语言实现简单的三子棋游戏源码

    本文实例为大家分享了C语言实现简单的三子棋游戏的具体代码,供大家参考,具体内容如下 1.游戏的整体划分 因为C语言是面向过程的,我将游戏抽象出来玩家下棋,电脑下棋,在判断输赢这一过程,又通过对过程的分析,进行了具体函数的实现,分为如下模块: 游戏主菜单函数 void menu(); 初始化棋盘函数 void InitBoard(char board[ROW][COL], int row, int col): 打印棋盘函数 void DisplayBoard(char board[ROW][COL

  • flex 简单例子(含实例效果图 源码)

    flex 简单例子(含实例效果图 源码)

    温故而知新,简简单单的写了一个例子.以后会在注图形化处理方面多写些例子. 源码: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="top" applicationComplete="init()"

随机推荐