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 相关文章推荐
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
基于Vue实现timepicker
Apr 25 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 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
PHP 和 MySQL 基础教程(四)
2006/10/09 PHP
PHP 远程关机实现代码
2009/11/10 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
php获取图片信息的方法详解
2015/12/10 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
mouse_on_title.js
2006/08/25 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
轮播图组件js代码
2016/08/08 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
BootStrap 导航条实例代码
2017/05/18 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
浅析TypeScript 命名空间
2020/03/19 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
python得到单词模式的示例
2018/10/15 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
Python和Bash结合在一起的方法
2020/11/13 Python
python操作toml文件的示例代码
2020/11/27 Python
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
女方婚礼新郎答谢词
2014/01/11 职场文书
寄语是什么意思
2014/04/10 职场文书
总经理检讨书
2014/09/15 职场文书
大学生村官个人总结
2015/02/15 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python