点赞按钮

导入vue.js

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>

html代码

<div id="dianzan">
		<like>
			
		</like>
	</div>

js代码

Vue.component('like',{
		template:'<button @click="toggle_like">?{{like_count}}</button>',
		data:function () {
			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:'#dianzan',
	});

改变button里的内容可以换图标比如“?”
如果想只增不减就把else里的和this.liked=!this.liked删掉