Vue动态实现评分效果


Posted in Javascript onMay 24, 2017

本文实例为大家分享了Vue动态实现评分效果的具体代码,供大家参考,具体内容如下

1.图片分为三种

on:Vue动态实现评分效果half:Vue动态实现评分效果 offVue动态实现评分效果

<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{
    background-image: url(img/on.png);
  }
  .star-item.half{
    background-image: url(img/half.png);
  }
  .star-item.off{
    background-image: url(img/off.png);
  }
</style>
<div id="app">
  <ul class="star">
    <span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" track-by="index"></span><!--性能优化 track-by 数据不改变时不会重新渲染-->
  </ul>
</div>
<script>
  new Vue({
    el: '#app',
   data:{
    score: 4
  },
   computed:{ //计算属性
    itemClasses(){
      let result = [];
      let score = Math.floor(this.score * 2 ) / 2;
      let hasDecimal = score % 1 !== 0;
      let integer = Math.floor(score);
      for(let i=0;i<integer;i++){
        result.push("on");
      }
      if(hasDecimal){
        result.push("half");
      }
      while(result.length < 5){
        result.push("off");
      }
      return result;
    }
  }
})
</script>

根据需求改变代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
Vue常用指令详解分析
Aug 19 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 #Javascript
jquery append与appendTo方法比较
May 24 #jQuery
php 修改密码实现代码
May 24 #Javascript
详解VueJs前后端分离跨域问题
May 24 #Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 #Javascript
angular directive的简单使用总结
May 24 #Javascript
深入理解JavaScript 参数按值传递
May 24 #Javascript
You might like
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
Nginx实现反向代理
2017/09/20 Servers
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
Vue中的Vux配置指南
2017/12/08 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
python如何生成各种随机分布图
2018/08/27 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
零件设计自荐信范文
2013/11/27 职场文书
大学生职业规划前言模板
2013/12/27 职场文书
一句话工作感言
2014/03/01 职场文书
交通事故私了协议书
2014/04/16 职场文书
聘任证明怎么写
2015/03/02 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
寻找成龙观后感
2015/06/12 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书