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 相关文章推荐
JavaScript 替换Html标签实现代码
Oct 14 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
详细分析单线程JS执行问题
Nov 22 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 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的一个登录的类 [推荐]
2007/03/16 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
理解JS绑定事件
2016/01/19 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现基于HTTP文件传输实例
2014/11/08 Python
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
Python实现的字典值比较功能示例
2018/01/08 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
使用numba对Python运算加速的方法
2018/10/15 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
关于python中的xpath解析定位
2020/03/06 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
迎国庆横幅标语
2014/10/08 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL