Let’s share with you the vue 2.0 implementation of the star rating component. The code is very simple, let’s take a look together!
I won’t say much nonsense, I will just post the code to you. The specific code is as follows:
<template >
<div>
<ul>
<li :class="{li1:1,bg1:index%2}" v-for="(value,index) in list"><span class="stu_span1">
{{}}</span>
<span class="stu_teacher">Class teacher：{{}}</span>
<div v-for="(item,index1) in " class="stu_div" :>
<span class="stu_title">{{}}</span>
<span class="stu_bgstar" :>
<span class="stu_bgstar1" :title=".title1"></span>
<span class="stu_bgstar1" :title=".title1"></span>
<span class="stu_bgstar1" :title=".title1"></span>
<span class="stu_bgstar1" :title=".title1"></span>
<span class="stu_bgstar1" :title=".title1"></span>
</span>
<span class="stu_bgstar2" @mousemove="pingjia($event)" :title=".title1"
@click="pingjia1($event)" @mouseleave="pingjia2($event)"></span>
<span>{{}}</span>
</div>
</li>
<button class="but1" @click="pingjia3($event)">evaluate</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/);*/
background-size: 50px 50px;
}
.stu_bgstar1{
width: 50px;
height: 50px;
float: left;
background: url(../image/);
background-size: 50px 50px;
margin-left: 0px;
}
.stu_bgstar2{
width: 250px;
height: 50px;
float: left;
/*background: url(../image/);*/
/*background-size: 50px 50px;*/
margin-left: -250px;
opacity: 0;
}
.stu_bgstar3{
background: url(../image/);
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:"math",teacher:"Zheng...0",title1:0,
zh:[{title:"Class atmosphere",d:0,lastD:0},
{title:"Teacher's Level",d:0,lastD:0},{title:"After class arrangement",d:0,lastD:0}
],text:"good"}},
{classs:{major:"Chinese",teacher:"Zheng...1",title1:1,
zh:[{title:"Class atmosphere",d:0,lastD:0},
{title:"Teacher's Level",d:0,lastD:0},{title:"After class arrangement",d:0,lastD:0}
],text:"good"}},
{classs:{major:"English",teacher:"Zheng...2",title1:2,
zh:[{title:"Class atmosphere",d:0,lastD:0},
{title:"Teacher's Level",d:0,lastD:0},{title:"After class arrangement",d:0,lastD:0}
],text:"good"}},
{classs:{major:"math",teacher:"Zheng...3",title1:3,
zh:[{title:"Class atmosphere",d:0,lastD:0},
{title:"Teacher's Level",d:0,lastD:0},{title:"After class arrangement",d:0,lastD:0}
],text:"good"}},
{classs:{major:"math",teacher:"Zheng...4",title1:4,
zh:[{title:"Class atmosphere",d:0,lastD:0},
{title:"Teacher's Level",d:0,lastD:0},{title:"After class arrangement",d:0,lastD:0}
],text:"good"}},
{classs:{major:"math",teacher:"Zheng...5",title1:5,
zh:[{title:"Class atmosphere",d:0,lastD:0},
{title:"Teacher's Level",d:0,lastD:0},{title:"After class arrangement",d:0,lastD:0}
],text:"good"}}]
}
},
methods:{
pingjia($event){
let wei = $;
let b = $;
let a = parseInt($/250*100);
let c = parseFloat($/50);
[wei].[b].d = (c);
[wei].classs.title1 = a;
for(let i = 0;i<5;i++){
if(i<[wei].[b].d){
$[i].('stu_bgstar3');
}
else{
$[i].('stu_bgstar3');
}
}
if(a==0){
$[0].('stu_bgstar3');
}
},
pingjia1($event){
let wei = $;
let b = $;
[wei].[b].lastD = [wei].[b].d;
},
pingjia2($event){
let wei = $;
let b = $;
for(let i = 0;i<5;i++){
if(i<[wei].[b].lastD){
$[i].('stu_bgstar3');
}
else{
$[i].('stu_bgstar3');
}
}
},
pingjia3($event){
([0].);
}
}
}
</script>
Summarize
The above is the example code of the front-end star rating function component that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!