<style>
.adder{
background: red;
}
</style>
<div id="jiayi">
<adder></adder>
</div>
Vue.component('adder',{
template:'<button :class="{adder:adder_}" @click="add1">赞{{counts}}</button>', //v-bind绑定一个样式,v-on绑定一个点击
data:function(){
return {
counts:5,
choose:false,
adder_:false,
}
},
methods:{
add1:function () {
if(!this.choose){
this.counts++;
this.choose=!this.choose;
this.adder_=true;
}else{
this.counts--;
this.choose=!this.choose;
this.adder_=false;
}
}
}
});
new Vue({
el:'#jiayi',
})