码迷,mamicode.com
首页 > 其他好文 > 详细

在上线项目中,用Vue写一个星级评价

时间:2018-07-11 19:45:15      阅读:651      评论:0      收藏:0      [点我收藏+]

标签:static   height   技术分享   color   git   icon   项目   content   spl   

先看一下效果:

技术分享图片

html:

    <div class="big-star-box">
            <img :src="imgNum>0 ? srcStar : srcNoStar" @click="imgItem(1)">
            <img :src="imgNum>1 ? srcStar : srcNoStar" @click="imgItem(2)">
            <img :src="imgNum>2 ? srcStar : srcNoStar" @click="imgItem(3)">
            <img :src="imgNum>3 ? srcStar : srcNoStar" @click="imgItem(4)">
            <img :src="imgNum>4 ? srcStar : srcNoStar" @click="imgItem(5)">
        </div>

css:

        .big-star-box{
            display: flex;
            justify-content: center;
            align-items: center;
        }
         .big-star-box img{
            vertical-align: top;
            width: 26px;
            height: 26px;
            padding: 0 9px;
        }

vue.js:

    var vue=new Vue({
        el:"#vue",
        data:{
            imgNum:2,
            srcStar:‘../static/img/common/icon_star_big.jpg‘,
            srcNoStar:‘../static/img/common/icon_nostar_big.jpg‘
        },
        created:function(){

        },
        mounted:function(){

        },
        methods:{
            imgItem:function (num) {
                this.imgNum = num;
            }
        }
    })

 

在上线项目中,用Vue写一个星级评价

标签:static   height   技术分享   color   git   icon   项目   content   spl   

原文地址:https://www.cnblogs.com/lguow/p/9296018.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!