Vue【列表页app】-点赞与取消点赞效果

效果"/>

Vue【列表页app】-点赞与取消点赞效果

Vue【列表页app】-点赞与取消点赞效果

第二步：【js】定义

第三步：【methods里面创建function判断】

【代码】

<template><view><view class="likeimg" @tap="like"><image v-if="isClick==0" class="likeimage" style="color: #30D4F5;" src="../../static/like.png"></image><image v-if="isClick==1" class="likeimage" style="color: #30D4F5;" src="../../static/like1.png"></image></view><view class="clicknum">{{clickNum}}</view></view>
</template><script>export default{data() {return {clickNum:12,isClick:''}},methods:{like:function(){if(this.isClick==0){this.isClick=1this.clickNum=this.clickNum+1console.log(this.clickNum)}else{this.isClick=0this.clickNum=this.clickNum-1}}}}</script><style></style>

【注意:】如有涉及到连接后台接口问题，可在methods进行需求的修改。OK啦，希望对需要的小伙伴有所帮助