vue实现五星评价(vue小应用)

使用vue实现类似电商的五星评价,如图:

下载两个图片:(on.png)和(off.png)

通过修改元素的class名来切换背景图

引用vue.js文件

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

html代码:

绑定鼠标进入、鼠标离开、鼠标点击事件。

:class=" { ' on ' : cur >= n } " 含义是当cur >= n成立的时候把 on 赋给元素的 class 属性

<div id="box">
    <div v-for="n in 5" @mouseenter="enter(n)" @mouseleave="leave()" @click="Selected(n)" :class="{'on':cur>=n}"></div>
</div>

css代码:

#box .on{
    background: url('img/on.png') no-repeat;
}
#box div{
    width: 56px;
    height: 59px;
    float: left;
    background: url('img/off.png') no-repeat;
}

js代码:

var vm = new Vue({
    el : '#box',
    data : {
        cur : -1,
        flag : false //鼠标点击后变成true,鼠标进入进出事件就不会改变背景图
    },
    methods : {
        enter(idx){
            if(!this.flag){
                this.cur = idx;
            }
        },
        leave(){
            if(!this.flag){
                this.cur = -1;
            }
        },
        Selected(n){
            this.flag = true;
            this.cur = n;
        }
    }
});

转载于:https://www.cnblogs.com/luowenshuai/p/9379534.html

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值