vue2.0实现前端星星评分功能组件实例代码


Posted in Javascript onFebruary 12, 2018

下面给大家分享vue 2.0实现星星评分组件,代码很简单,一起看看吧!

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<template id="pingJia">
<div>
<ul>
<li :class="{li1:1,bg1:index%2}" v-for="(value,index) in list"><span class="stu_span1">
{{value.classs.major}}</span>
<span class="stu_teacher">任课老师:{{value.classs.teacher}}</span>
<div v-for="(item,index1) in value.classs.zh" class="stu_div" :id="index">
<span class="stu_title">{{item.title}}</span>
<span class="stu_bgstar" :id="index1">
<span class="stu_bgstar1" :title="value.classs.title1"></span>
<span class="stu_bgstar1" :title="value.classs.title1"></span>
<span class="stu_bgstar1" :title="value.classs.title1"></span>
<span class="stu_bgstar1" :title="value.classs.title1"></span>
<span class="stu_bgstar1" :title="value.classs.title1"></span>
</span>
<span class="stu_bgstar2" @mousemove="pingjia($event)" :title="value.classs.title1" 
@click="pingjia1($event)" @mouseleave="pingjia2($event)"></span>
<span>{{item.lastD}}</span>
</div>
</li>
<button class="but1" @click="pingjia3($event)">评价</button>
</ul>
</div>
</template>
<style>
 
.li1{
width: 1200px;
/*height: 330px;*/
color: #f60;
border: 1px solid #000000;
font-size: 20px;
line-height: 50px;
}
 
.bg1{
background: #00A2D4;
}
.but1{
width: 200px;
height: 40px;
font-size: 25px;
float: right;
margin: 5px 5px;
}
.stu_span1{
float: left;
margin: 0px 25px;
}
.stu_teacher{
float: left;
}
.stu_div{
float: left;
width: 1000px;
height: 50px;
}
.stu_title{
float: left;
}
.stu_bgstar{
width: 250px;
height: 50px;
float: left;
margin-left:500px;
/*background: url(../image/star.png);*/
background-size: 50px 50px;
}
.stu_bgstar1{
width: 50px;
height: 50px;
float: left;
background: url(../image/star.png);
background-size: 50px 50px;
margin-left: 0px;
}
.stu_bgstar2{
width: 250px;
height: 50px;
float: left;
/*background: url(../image/star.png);*/
/*background-size: 50px 50px;*/
margin-left: -250px;
opacity: 0;
}
.stu_bgstar3{
background: url(../image/star1.png);
background-size: 50px 50px;
}
.stu_li_text{
width: 95%;
height: 100px;
border: 1px solid #000000;
resize: none;
}
</style>
<script>
export default{


data(){



return{





list:[{classs:{major:"数学",teacher:"郑...0",title1:0,
zh:[{title:"课堂氛围",d:0,lastD:0},
{title:"老师水平",d:0,lastD:0},{title:"课后布置",d:0,lastD:0}
],text:"好"}},
{classs:{major:"语文",teacher:"郑...1",title1:1,
zh:[{title:"课堂氛围",d:0,lastD:0},
{title:"老师水平",d:0,lastD:0},{title:"课后布置",d:0,lastD:0}
],text:"好"}},
{classs:{major:"英语",teacher:"郑...2",title1:2,
zh:[{title:"课堂氛围",d:0,lastD:0},
{title:"老师水平",d:0,lastD:0},{title:"课后布置",d:0,lastD:0}
],text:"好"}},
{classs:{major:"数学",teacher:"郑...3",title1:3,
zh:[{title:"课堂氛围",d:0,lastD:0},
{title:"老师水平",d:0,lastD:0},{title:"课后布置",d:0,lastD:0}
],text:"好"}},
{classs:{major:"数学",teacher:"郑...4",title1:4,
zh:[{title:"课堂氛围",d:0,lastD:0},
{title:"老师水平",d:0,lastD:0},{title:"课后布置",d:0,lastD:0}
],text:"好"}},
{classs:{major:"数学",teacher:"郑...5",title1:5,
zh:[{title:"课堂氛围",d:0,lastD:0},
{title:"老师水平",d:0,lastD:0},{title:"课后布置",d:0,lastD:0} 
],text:"好"}}]



}


},
methods:{



pingjia($event){
let wei = $event.target.parentNode.id;
let b = $event.target.previousElementSibling.id;
let a = parseInt($event.offsetX/250*100);
let c = parseFloat($event.offsetX/50);
this.list[wei].classs.zh[b].d = Math.ceil(c);
this.list[wei].classs.title1 = a;
for(let i = 0;i<5;i++){
if(i<this.list[wei].classs.zh[b].d){
$event.target.previousElementSibling.children[i].classList.add('stu_bgstar3'); 
}
else{
$event.target.previousElementSibling.children[i].classList.remove('stu_bgstar3'); 
}
}
if(a==0){
$event.target.previousElementSibling.children[0].classList.remove('stu_bgstar3'); 
}
},
pingjia1($event){
let wei = $event.target.parentNode.id;
let b = $event.target.previousElementSibling.id;
this.list[wei].classs.zh[b].lastD = this.list[wei].classs.zh[b].d;
},
pingjia2($event){
let wei = $event.target.parentNode.id;
let b = $event.target.previousElementSibling.id;
for(let i = 0;i<5;i++){
if(i<this.list[wei].classs.zh[b].lastD){
$event.target.previousElementSibling.children[i].classList.add('stu_bgstar3'); 
}
else{
$event.target.previousElementSibling.children[i].classList.remove('stu_bgstar3'); 
}
}
},
pingjia3($event){
console.log(this.list[0].classs.text);
}
}


}
</script>

总结

以上所述是小编给大家介绍的vue2.0实现前端星星评分功能组件实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 #Javascript
Vue+webpack项目基础配置教程
Feb 12 #Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 #Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 #jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 #jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 #jQuery
原生js实现省市区三级联动代码分享
Feb 12 #Javascript
You might like
新版PHP极大的增强功能和性能
2006/10/09 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
一行代码告别document.getElementById
2012/06/01 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
使用Python写个小监控
2016/01/27 Python
Python装饰器基础详解
2016/03/09 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
python+os根据文件名自动生成文本
2019/03/21 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
Django Rest framework频率原理与限制
2019/07/26 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
在Django中实现添加user到group并查看
2019/11/18 Python
django在开发中取消外键约束的实现
2020/05/20 Python
Python requests接口测试实现代码
2020/09/08 Python
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
如何进行Linux分区优化
2013/02/12 面试题
师范生自荐信范文
2013/10/06 职场文书
物业管理个人自我评价
2013/11/08 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
《雷雨》教学反思
2014/02/20 职场文书
销售会计岗位职责
2014/03/15 职场文书
承诺书范文
2014/06/03 职场文书
2015年教研组工作总结
2015/05/04 职场文书