~~~
//css
.one{
color:#333;
}
.two{
color:orange;
}
button{
background: #fff;
outline: none;
border:none;
}
~~~
~~~
//HTML
<div id="app">
<like></like>
</div>
<template id="like-component">
<button @click="toggle_like"
v-bind:class="liked?'one':'two'">
👍 {{like_count}}</button>
</template>
~~~
~~~
//JS
Vue.component('like',{
template:"#like-component",
data:function(){
return{
// 点赞的数量
like_count:11,
// 点赞的状态
liked:false
}},
methods:{
toggle_like:function(){
this.liked=!this.liked
if(!this.liked){
this.like_count++
}else{
this.like_count--
}
}
}
})
new Vue({
el:"#app"
})
~~~
