<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.liked{
background: deeppink;
}
</style>
</head>
<body>
<div id="app">
<like></like>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script>
Vue.component('like', {
template: '<button @click="toggle_like()" :class="{liked:liked}">点赞{{like_count}}</button>',
data:function () { //data保存数据对象
return {
like_count:10,
liked:false
}
},
methods:{
toggle_like:function () {
if(!this.liked)
this.like_count++;
else
this.like_count--;
this.liked=!this.liked
}
}
});
new Vue({
el: "#app"
})
</script>
</body>
</html>