vue实现点亮STAR项目目的：点击星星进行评价，点击星星时，星星前面的都点亮，当鼠标滑过时，相应分数前的星星都点亮，鼠

项目目的：点击星星进行评价，点击星星时，星星前面的都点亮，当鼠标滑过时，相应分数前的星星都点亮，鼠标离开时，点亮的星星数量是之前点击的数量
思路：
- 设定一个变量tempScore控制临时滑过时的分数
- 设定一个变量score为确定时的分数
- 从始至终用tempScore控制分数，当点击时改变score=tempScore
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1589357_zcxo5hhzxxh.css">
</head>
<body>
    <div id="app">
        <div>你的满意是我们莫大的荣幸
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/2/19/1705d099298c430d~tplv-t2oaga2asx-image.image)：</div>
        <span style="font-size: 30px;padding: 10px;color: gold;" 
        class="iconfont " :class="item<=tempScore?'icon-xingxing':'icon-xingxing1'"
        v-for="item in 10" 
        @mouseleave='tempScore=score'
        @mouseenter='tempScore=item'
        @click='score=tempScore'></span>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data() {
            return {
                score:5,
                tempScore:5,
            }
        },
    })

效果