vue实现点击星星评分效果
首先通过引入bootcdn里的font-awesome获取星星素材
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
此时’fa-star’为实星,‘fa-star-o’为空星。
给它一个变量定义星星的个数count
<style>
.fa {
color: coral;
}
</style>
<div id="app">
<i class="fa fa-star" v-for="item in count" aria-hidden="true"></i>
<i class="fa fa-star-o" v-for="item in count" aria-hidden="true"></i>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let zyy = new Vue({
el: "#app",
data() {
return {
count: 10,
}
},
效果图如下:
1.此时想改变实心或空心的数量,通过:class来判断,定义一个变量tempScore代表实心数量。将item与tempScore比较,判断当item小于等于定义的实心数量tempScore时显示实星,否则为空星。:class="item<=tempScore?'fa-star':'fa-star-o'"
。
2.添加一个mouseenter事件,当鼠标移动到哪颗星就让实心数量等于当前的item。@mouseenter="tempScore=item"
。
3.添加一个mouseleave事件,当鼠标离开,此时的实星数量固定了,想让它回到原来的位置,就要再定义一个score让它与变量tempScore相等从而记录开始的位置。@mouseleave="tempScore=score"
。
4.想让实星点击到哪就显示多少时绑定一个click事件,将当前点击那个的item给到score记录当前位置@click="score=item"
。
最终代码如下:
<style>
.fa {
color: coral;
}
</style>
<div id="app">
<i class="fa fa-star"
v-for="item in count"
:class="item<=tempScore?'fa-star':'fa-star-o'"
@mouseenter="tempScore=item"
@mouseleave="tempScore=score"
@click="score=item"
aria-hidden="true"></i>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let zyy = new Vue({
el: "#app",
data() {
return {
tempScore:1,
score:1,
count:10
}
},
methods: {
},
})
</script>
效果图如下: