vue仿网页星星评价小例子，简单易懂（点击，经过，离开）

苟圣啊

于 2020-06-15 17:41:18 发布

阅读量288

点赞数 1

分类专栏： vue.js 页面小技巧（小实例）文章标签： vue

本文链接：https://blog.csdn.net/beLaity/article/details/106767764

版权

页面小技巧（小实例）同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

vue.js

13 篇文章 0 订阅

订阅专栏

	.star{
            color: gold;
        }

<div id="app">
    <i @mouseleave='cIndex=index' @click='index=item' @mouseenter='cIndex=item' v-for='item in count' class="fa star " aria-hidden="true" :class="item <= cIndex?'fa-star':'fa-star-o'" style="font-size: 30px;"></i>
</div>

	new Vue({
            el:'#app',
            data(){
                return{
                    count:10,
                    index:1,
                    cIndex:1
                }
            },
            methods:{ 
                
            }
        })