<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .liked{ background-color: red; } </style> </head> <body> <div id="app"> <like></like> </div> <!--<template id="like-compoent-top">--> <!--<button :class=‘{liked:liked}‘ @click=‘toggle_like()‘>赞{{like_count}}</button>--> <!--</template>--> <script src="../lib/vue.js"></script> <script src="js/main.js"></script> </body> </html>
Vue.component("like",{ template:` <button :class=‘{liked:liked}‘ @click=‘toggle_like()‘>赞{{like_count}}</button> `, // template:"#like-compoent-top", 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:"#app" });