首先新建一个vue组件,名叫star.vue
star.vue的代码
<template>
<div>
<ul class="star">
<li v-for="item in chance" :class="item"></li> <!--根据数据循环创建li标签-->
</ul>
</div>
</template>
<script>
export default {
name: "star",
data() {
return {
// num:5,
// stor:3.5,
// star: ["on", "on", "on", "off", "off"]
}
},
props:["num","stor"], // 接受参数
computed: {
chance(){
// 创建一个数组,让数组里的每个值都是off,好进行下面的比较。
let arr=[];
while (this.num>arr.length){
arr.push("off")
}
//向下取整数,数组中的Array.map() 方法返回一个新数组,此方法可以以一个函数为参数,循环数组的每一个元素,函数将数组中的元素接收为单个参数
//判断整数大于下标值,大于的话返回on,因为数组的下标从0开始
// 多出来的小数(res)乘10,大于等于5,使定义的新数组的num变成half,因为数组的下标从0开始。
let num=Math.floor(this.stor)
let res=(this.stor-num)*10
let newstar=arr.map((item,index)=>{
if (num>index){
return "on"
} else {
return "off"
}
})
if (res>=5){
newstar[num]="half"
}
return newstar //返回newstar数组
}
},
}
</script>
<style scoped>
.star li {
width: 30px;
height: 30px;
float: left;
list-style: none;
background: url("./img/star36_off@3x.png") no-repeat center/cover;
}
.star .on{
background-image: url("./img/star36_on@3x.png");
}
.star .half{
background-image:url("./img/star36_half@3x.png") ;
}
</style>
在要用的组件中导入进去,注册一个标签
import star from '@/components/star/star.vue'
export default {
name: 'App',
components:{
star
}
}
标签绑定num,stor
<template>
<div id="app">
<star :num="5" :stor="4.4"></star>
</div>
</template>