vue实现点击星星评分效果

最新推荐文章于 2023-05-27 16:54:54 发布

原创最新推荐文章于 2023-05-27 16:54:54 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

本文详细介绍如何使用Vue和font-awesome库实现动态星星评分效果。通过定义变量和事件处理，实现鼠标悬停、离开和点击时星星状态的变化。

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>