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 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
提高 DHTML 页面性能
Dec 25 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
浅析java线程中断的办法
Jul 29 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 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 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
php生成短网址示例
2014/05/05 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
实例讲解python函数式编程
2014/06/09 Python
用python读写excel的方法
2014/11/18 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
python线程join方法原理解析
2020/02/11 Python
Django中的AutoField字段使用
2020/05/18 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
学生生病请假条范文
2014/02/16 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
高二学生评语大全
2014/04/25 职场文书
综合实践活动总结
2014/05/05 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
施工安全汇报材料
2014/08/17 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
万里长城导游词
2015/01/30 职场文书
MySQL基础(二)
2021/04/05 MySQL
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
一行Python命令实现批量加水印
2022/04/07 Python