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{
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>

根据需求改变代码

Vue动态实现评分效果的更多相关文章

  1. jQuery动态星级评分效果实现方法

    本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...

  2. vue实现简单评分效果

  3. ZUI(BootStrap)使用vue动态插入HTMl所创建的data-toggle事件初始化方法

    用ZUI的图片浏览:lightbox 写静态html的时候是有预览效果的,使用了vue动态加载就没有效果了, 网上的说法是动态生成的没有激活事件:ZUI(BootStrap)动态插入HTMl所创建的d ...

  4. Vue过渡和动画效果展示(案例、GIF动图演示、附源码)

    前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...

  5. Android 动态Tab分页效果实现

    当前项目使用的是TabHost+Activity进行分页,目前要做个报表功能,需要在一个Tab页内进行Activity的切换.比方说我有4个Tab页分别为Tab1,Tab2,Tab3,Tab4,现在的 ...

  6. 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果

    原文网址:http://www.zhimengzhe.com/IOSkaifa/37910.html MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显 ...

  7. [JavaScript] js 迅雷评分效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www ...

  8. css 实现评分效果

    css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...

  9. canvas动态小球重叠效果

    前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 效果展示 静态小球 首先 ...

随机推荐

  1. block中self关键字的使用-防止self 被retain一次

    在代码块中使用对象的成员时(成员变量是属性strong,MRC估计是retain时效果一样,使用方法时也一样): 警告: capturing self strongly in this block i ...

  2. poj 1833 排列 STL 全排列公式

    排列 Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 15173   Accepted: 6148 Description 题 ...

  3. 自己动手写HashMap

    HashMap是结合队列和链表各自的优点,创造的一种在查询和修改间取得性能平衡的一种集合! MyMap接口: package self; //接口 public interface MyMap { p ...

  4. BZOJ2229: [Zjoi2011]最小割(最小割树)

    传送门 最小割树 算法 初始时把所有点放在一个集合 从中任选两个点出来跑原图中的最小割 然后按照 \(s\) 集合与 \(t\) 集合的归属把当前集合划分成两个集合,递归处理 这样一共跑了 \(n − ...

  5. HTML5之新增的元素和废除的元素 (声明:内容节选自《HTML 5从入门到精通》)

    新增结构元素: section元素 section元素定义文档或应用程序中的一个区段,比如章节.页眉.页脚或文档中的其他部分.它可以与h1,h2,h3,h4,h5,h6元素结合起来使用,标示文档结构. ...

  6. Date()函数的用法

  7. 当react 项目使用px2rem

    参考资料:http://easywork.xin/2018/09/02/react-2/ 我拿到的设计图 是  375px //配置px2rem px2rem({remUnit: 37.5})   在 ...

  8. Hello,world的几种写法!

    这是我的第一篇文章!开个玩笑~~“你知道回字的四种写法吗”? printf("Hello,world!"); cout<<"Hello,world!" ...

  9. ASP.NET MVC学习笔记 第三天

    布局: 如果不使用布局页,需要将Layout属性设置为null. @{     Layout = null; } 使用默认布局页: 使用Add View对话框,选择使用布局页(是布局页的名称文本框为空 ...

  10. RocketMQ读书笔记7——吞吐量优先的场景

    [Broker端进行消息过滤] 在Broker端进行消息过滤,可以减少无效消息发送到Consumer,少占用网络宽带从而提高吞吐量. [过滤方式1——通过Tag过滤] [ 关于Tag和Key ] 对一 ...