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 相关文章推荐
让Firefox支持event对象实现代码
Nov 07 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
jQuery表格插件ParamQuery简单使用方法示例
Dec 05 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
JavaScript数组去重的五种方法
Nov 05 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
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
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
python定时任务 sched模块用法实例
2019/11/04 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
体育教学随笔感言
2014/02/24 职场文书
办公室副主任职责范本
2014/03/08 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
oracle重置序列从0开始递增1
2022/02/28 Oracle