vue.js 点赞与取消点赞组件源码
使用的是<script>引用方式,下载好vue.js引用就行了css部分img{width: 50px;height: auto;}html部分<div id="dianzan"><my-component></my-component></div&am
·
使用的是<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'
})
更多推荐
已为社区贡献1条内容
所有评论(0)