先看一下效果：
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;
}
}
})