史上最简单的星星打分-vue

qq_53245972

于 2023-04-19 10:52:37 发布

阅读量198

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_53245972/article/details/130238746

版权

只需要准备两个星星图片，可以去阿里图标库下载

选中一颗星星，点击下载，可以选择图片的样式和格式保存到文件夹里。

接下来就是代码时刻啦：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 注意：template不能应用key   注意：n从1-->
        <template v-for="n in 5" >
            <img src="img/xx-active.png" alt="" v-if="n<=score" @click="score=n">
            <img src="img/xx.png" alt="" v-else  @click="score=n">
        </template>
    </div>

    <script>
        var vm = new Vue({
            data: {
                score: 3
            }
        })

        vm.$mount("#app")
    </script>
</body>
</html>