vue实现打星评分功能

//首先引用vue.js
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>

然后设置vue

<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                score1:2,
                score:2,
                count:10
            }
        },
    })
</script>

开始设置星星显示

<div id="app">
	//通过v-for的循环,显示出了10个星星   PS(我用的是iconfont,大家使用前记得要link引入)
    <i v-for="order in count" class="iconfont iconxingxing1" aria-hidden="true"></i>
</div>

在这里插入图片描述
这个时候只是循环出了指定个数count的星星

//修改i标签 @mouseenter当鼠标触碰是,将score1更改为鼠标当前所在的order
//再更改class,添加一个绑定class,进行判断,order小于等于score1的时候,显示iconshoucang1的图标,否则反之
//这样,触碰时更改score1,触碰到底几颗星,从左开始第一颗到鼠标触碰的那一刻变成红色的星
<i v-for="order in count" class="iconfont" @mouseenter="score1=order"
 :class="order<=score1?'iconshoucang1':'iconxingxing1'" ></i>

在这里插入图片描述
但是这时有问题,鼠标只是触碰到,但是并没有点击,星星就变了,所以得加以下代码

//@mouseleave 鼠标离开时score1的值改为score,这时就体现了score的作用,在只是触碰没点击时,星星变成之前的数量
<i v-for="order in count" class="iconfont" @mouseenter="score1=order"
 :class="order<=score1?'iconshoucang1':'iconxingxing1'" 
 @mouseleave="score1 = score"></i>

再加一个点击事件,就完成了

//@click点击后score的值变为order
<i v-for="order in count" class="iconfont" @mouseenter="score1=order"
 :class="order<=score1?'iconshoucang1':'iconxingxing1'" 
 @mouseleave="score1 = score"  @click="score=order"></i>
Logo

前往低代码交流专区

更多推荐