Vue【列表页app】-点赞与取消点赞效果
第一步:【template】
第二步:【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啦,希望对需要的小伙伴有所帮助