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实现类似百度分享功能的方法
Jul 27 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
javascript实现下雨效果
Mar 27 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
微信小程序实现底部弹出框
Nov 18 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中curl_multi的应用
2013/07/17 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
Linux下为不同版本python安装第三方库
2016/08/31 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
Python连接Redis的基本配置方法
2018/09/13 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
对python中Json与object转化的方法详解
2018/12/31 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
python如何实现word批量转HTML
2020/09/30 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
人事专员的岗位职责
2014/03/01 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
行政文员岗位职责
2015/02/04 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
Python list列表删除元素的4种方法
2021/11/01 Python
Docker安装MySql8并远程访问的实现
2022/07/07 Servers