vue.js 点赞与取消点赞组件源码

使用的是<script>引用方式，下载好vue.js引用就行了

css部分

img{width: 50px;
    height: auto;}

html部分

<div id="dianzan">
    <my-component></my-component>
</div>

js部分

var local_admire=localStorage.getItem('admire');     //获取存储在本地的点赞状态
Vue.component('my-component',{
    data:function () {
        return {
            admire:local_admire
        }
    },
    template:'<div id="admire">
<img src="images/admire1.png" v-if="!admire" @click="change()">
<img v-else src="images/admire2.png"  @click="change()">
</div>',       
     methods:{
         change:function () {
                this.admire==false?this.admire=true:this.admire=false;
                localStorage.setItem('admire',this.admire);            //储存状态到本地，关闭页面重新打开会显示点赞状态
    }
  }
}）

new Vue({

        el:'#dianzan'

})