此星级评分超级简单 好用高效 适用于多种场景 三目运算
代码如下
html 部分
// An highlighted block
<template>
<div>
<div style="display: inline-block"
v-for="(num,index) in 6" :key="index" @click="handle(index)">
<img :src='data>=index?ling:bu' alt="">
</div>
</div>
</template>
js 部分
// An highlighted block
<script>
import img from '../assets/xingX.png'
import imgB from '../assets/xingB.png'
export default {
data() {
return {
data:3,
bu:imgB,
ling:img
}
},
methods:{
handle(val){
console.log(val)
this.data = -1
this.data = val
}
}
}
</script>
效果如下: