一、定义局部组件
在组件中写point_like方法,给button绑定方法,给button加class属性,属性定义在html中
var like={
template: '<button :class="{likeBackGround:isFalse}" @click="point_like">顶{{this.like_count}}</button>',
data:function(){
return {
like_count:10,
isFalse:false,
}
},
methods:{
point_like:function(){
if(!this.isFalse){
this.like_count++;
}
else
this.like_count--;
this.isFalse=!this.isFalse;
}
},
}
new Vue({
el:'#seg1',
data:{
comment:'每个用户只能点赞一次',
},
components:{
'like':like,
}
});
二、在Html中使用组件,定义style样式
<div id="seg1">
<like></like><span>{{comment}}</span>
</div>
<style>
.likeBackGround{
background:deeppink;
}
</style>
三、效果展示
初始效果
点击后效果