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

Posted 2020-12-03 奔跑的太阳花

先看一下效果：

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;
            }
        }
    })