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 相关文章推荐
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
jquery不常用方法汇总
Jul 26 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
使用jquery如何获取时间
Oct 13 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
Angular单元测试之事件触发的实现
Jan 20 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
织梦模板标记简介
2007/03/11 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
Pandas中把dataframe转成array的方法
2018/04/13 Python
Python面向对象程序设计示例小结
2019/01/30 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
python缩进长度是否统一
2020/08/02 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
学生个人求职自荐信格式
2013/09/23 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL