本文通过实例代码给大家介绍了vue2.0实现前端星星评分功能组件，非常不错，具有参考借鉴价值，需要的朋友参考下吧
下面给大家分享vue 2.0实现星星评分组件，代码很简单，一起看看吧！
废话不多说了，直接给大家贴代码了，具体代码如下所示：
.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_p{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;} 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);}} }
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
立即学习“前端免费学习笔记（深入）”；
在jQuery中如何实现鼠标响应式淘宝动画效果
在jQuery中如何实现鼠标响应式淘宝动画效果
在jQuery中如何实现鼠标响应式淘宝动画效果
以上就是使用vue2.0如何实现前端星星评分功能组件的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3188681.html
