前端实现点赞与取消点赞功能

最新推荐文章于 2024-08-01 23:43:20 发布

4 15 20 1C

最新推荐文章于 2024-08-01 23:43:20 发布

阅读量729

点赞数 2

文章标签：前端 html5 css vue.js scss

本文链接：https://blog.csdn.net/M40153c/article/details/124799940

版权

Vue.js 点赞功能 v-if 事件处理状态管理

关键词由CSDN通过智能技术生成

效果如下所示

话不多说直接上代码

html区：

下面的icon也可以换成图片image 或者其它用v-if控制点击的变换隐藏

<view class="likesbox"  @click="clicklikes">
    <u-icon name="thumb-up"  color="#888888"  size="36" v-if="likesshow"></u-icon>
    <u-icon name="thumb-up-fill"  color="#FF5C4D"  size="36" v-if="!likesshow"></u-icon>
    <view class="numb"> 1000 </view>
</view>

js区：

data() {
    return {
      likesshow: true,
    };
  },
methods: {
    clicklikes() {
      this.likesshow = !this.likesshow;
      this.form.number = !this.likesshow
        ? this.form.number + 1
        : this.form.number - 1;
    },
}

CSS我就不挂了