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=1
								this.clickNum=this.clickNum+1
								console.log(this.clickNum)
							}else{
								this.isClick=0
								this.clickNum=this.clickNum-1
							}
				}
				
				
			}
	}
	
</script>

<style>
	
</style>

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