vue实现静态页面点赞和取消点赞功能

本文实例为大家分享了vue实现静态页面点赞和取消点赞的具体代码，供大家参考，具体内容如下

效果如下：

点击之后 点赞数量+1，红心亮
再次点击，点赞数量-1，红心灭

逻辑：

由于列表是动态渲染的（for），数据是mock随机生成，所以绑定点击事件时，应该把当前下标和item的id都传到事件上，在data里面声明空数组，用来存放已经点击的id，
点赞点击事件触发，先进行判断，
1.当前data内的数组是否有这个点击的id，用indexof方法查找，如果找不到，执行点赞功能，数量+1，红心样式取反，最重要的是将当前点赞的id存到data的数组里 push进去。
2.反之找到了，就将他数量-1，心取消。
for遍历data的数组，目的是为了找到当前点击的id的下标，找到后，直接利用splice删除的放法，splice（i，1）第一个参数为下标，第二个删除一个，vue组件代码如下：

<template>
  <div v-if="foodMeishi">
    <div
      class="food-box-content"
      v-for="(item, index) in foodMeishi"
      :key="item.id"
    >
      <img class="food-photo" :src="item.foodphotoUrl" alt="" />
      <div class="head">
        <img :src="item.headImg" alt="" />
        <p class="head-name">{{ item.headName }}</p>
      </div>
      <div class="food-content">
        {{ item.content }}
      </div>
      <div class="food-bottom">
        <div class="xin" @click="dianzan(index, item.id)">
          <i class="iconfont " v-if="item.xin"></i>
          <i class="iconfont" v-else></i>
          <span>{{ item.dianzan }}</span>
        </div>
        <div class="pinglun">
          <i class="iconfont"></i>
          <span>{{ item.pinglun }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["foodMeishi"],
  data() {
    return {
      zanListId: [1, 2],
    };
  },
  methods: {
    dianzan(index, id) {
      let list = this.zanListId;
      if (list.indexOf(id) == -1) {
        // 没找到
        // 执行点赞功能
        this.foodMeishi[index].dianzan += 1;
        // 加到数组中
        this.zanListId.push(id);
        this.foodMeishi[index].xin = !this.foodMeishi[index].xin;
      } else {
        // 取消点赞
        this.foodMeishi[index].dianzan -= 1;
        this.foodMeishi[index].xin = !this.foodMeishi[index].xin;
        for (var i in this.zanListId) {
          if (this.zanListId[i] == id) {
            this.zanListId.splice(i, 1);
          }
        }
      }
    },
  },
};
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue+Bootstrap收藏（点赞）功能逻辑与具体实现

    Vue+Bootstrap收藏(点赞)功能逻辑与具体实现(原创),供大家参考,具体内容如下 点赞功能逻辑 点赞功能说明:连接了数据库,在有登录功能的基础上. 点赞功能具体实现目标,如下: 1.用户点击一次加入收藏,数量加一,再次点击取消收藏,数量减一 : 2.当多用户收藏,喜欢数量累加 : 3.如果用户已收藏,显示红心(点亮图标),未收藏,否之. : 点赞功能说明:点赞功能用到两个表,点赞表和数据表的count. 功能分析: 具体实现如图,可把该功能分为两个部分,分别实现. 1.红心部分逻辑:

  • vue实现直播间点赞飘心效果的示例代码

    vue实现直播间点赞飘心效果的示例代码

    前言: 在开发公司项目的时候,遇到了直播间的一些功能,其中点赞冒泡飘心,就折腾了好久,canvas学的不好,自己写不来,百度找了一堆都是js原生写法,迁移到vue项目里来好多问题,百度也解决不了.自己试着慢慢解决,竟然在不知不觉中通了!废话不多说,直接上代码,复制粘贴即可使用 示例: 不动就不动吧.png ```第一步```:先在外部新建一个js文件,取名index.js(名字自己随便取) index.js代码内容如下: /** * LikeHeart * @version: 1.0.0 * @

  • 解决vue-seamless-scroll滚动加点赞衔接处数据不同步问题

    解决vue-seamless-scroll滚动加点赞衔接处数据不同步问题

    VUE使用vue-seamless-scroll自动滚动加点赞,因为有两个overhidden导致点击不同同步dom,在代码中会出现两处vue-seamless-scroll上下悬接,悬接处点赞触发没反应,导致原因:下方悬接vue-seamless-scroll是静态的,没同步DOM 解决办法:加上this.$refs.seamlessScroll.reset() 表示重置意思 到此这篇关于解决vue-seamless-scroll滚动加点赞衔接处数据不同步问题的文章就介绍到这了,更多相关vue

  • Vue transition实现点赞动画效果的示例

    Vue transition实现点赞动画效果的示例

    目录 效果一览 爱心效果 数字滚动动画 点赞动画 效果一览 爱心效果 材料:爱心图标两个,没有我这种 icon 组件的用 png 图片代替 <transition :name=" isLike ? 'zoom' : '' " mode="out-in"> <!-- 爱心图标 --> <icon data="@icon/like.svg" color="#FF0000" v-if="isL

  • vue组件之间通信实例总结(点赞功能)

    vue组件之间通信实例总结(点赞功能)

    本文实例讲述了vue组件之间通信.分享给大家供大家参考,具体如下: 总结: 父组件-->子组件 ①通过属性 步骤1: <son myName="michael" myPhone='123'></son> <son :myName="userList[0]"></son> 步骤2: Vue.component('son',{ props:['myName','myPhone'] }) ②通过$parent 直接在子

  • VUE利用vuex模拟实现新闻点赞功能实例

    VUE利用vuex模拟实现新闻点赞功能实例

    回顾新闻详细页 很早我们的新闻详情页是在news-detail.vue 组件里,获取服务器数据,然后把数据保持到组件的data 里,既然我们已经用到了vuex,学习了它的state,我们就应该想到把返回的数据交给state 来存储. 1.首先在Vuex.Store 实例化的时候: state:{ user_name:"", newslist:[], newsdetail:{} }, 增加一个newsdetail 对象,newslist 数组是我们前面用来保存新闻列表数据的. 2.下面就

  • vue实现静态页面点赞和取消点赞功能

    vue实现静态页面点赞和取消点赞功能

    本文实例为大家分享了vue实现静态页面点赞和取消点赞的具体代码,供大家参考,具体内容如下 效果如下: 点击之后 点赞数量+1,红心亮再次点击,点赞数量-1,红心灭 逻辑: 由于列表是动态渲染的(for),数据是mock随机生成,所以绑定点击事件时,应该把当前下标和item的id都传到事件上,在data里面声明空数组,用来存放已经点击的id,点赞点击事件触发,先进行判断,1.当前data内的数组是否有这个点击的id,用indexof方法查找,如果找不到,执行点赞功能,数量+1,红心样式取反,最重要

  • 微信小程序实现列表页的点赞和取消点赞功能

    今天开发了一个文章的留言版块,于是想到要为某个留言点赞,点过赞的再次点击会取消点赞,代码如下: /*更新点赞*/ update_zan:function(e){ var that = this; var data = e.currentTarget.dataset; var mid = data.mid; var cookie_mid = wx.getStorageSync('zan') || [];//获取全部点赞的mid var isadd = 1; var newmessage = [];

  • 使用 Redis 缓存实现点赞和取消点赞的示例代码

    点赞功能是很多平台都会提供的一个功能,那么,我们要如何实现点赞和取消点赞呢? 这篇文章总结了我在项目中实现点赞的方法. 缓存 vs 数据库? 首先我们要考虑的是数据要放到哪里,很多时候我们都会把数据放到数据库(如 MySQL),由于关系型数据库的稳定性,大部分场景下我们也都会使用关系数据库来存储数据. 不过,在一些特殊的场景下,传统的关系型数据库很可能无法满足我们的需求.比如,在访问量较大的情况下,数据库很可能会宕机或者访问速度非常慢.这对用户来说是不能容忍的.因此就有了非关系型数据库,如 Re

  • Ajax实现对静态页面的文章访问统计功能示例

    本文实例讲述了Ajax实现对静态页面的文章访问统计功能.分享给大家供大家参考,具体如下: 众所周知,静态页面不仅速度快,而且对seo也有一定的帮助.前些日子,写了一帖关于<在SAE平台实现WordPress页面纯静态化至KVDB>.我自己使用了一段时间后,发现提速确实很明显.但是随之而来的一个问题就是,由于文章静态化后,页面并不会经过WordPress程序的处理,这样就导致了文章的访问量统计失效.当然,有一个叫做wp-postview的插件是可以解决这个问题的,但是我不是很喜欢插件,因为会拖慢

  • 微信小程序实现点赞、取消点赞功能

    微信小程序实现点赞、取消点赞功能

    最近接触到小程序,发现很有意思,在项目中遇到了一点小问题,就是点赞+取消点赞有些冲突,还有就是多项的点击,话不多说咱们直接上代码! 效果图 wxml <block wx:for="{{msg}}"> <image class='imgList' hidden='{{item.show}}' bindtap='zan' data-index='{{index}}' src='../resizeApi.png'></image> <image cl

  • php生成静态页面并实现预览功能

    php生成静态页面并实现预览功能

    一.前言 这篇文章主要是记录一下php生成静态页面的大致步骤,关于页面静态化,大家想必都听说过,但是真正用的时候反而不是很多.有些页面考虑到访问量比较大,页面结构又不常改动的,比如新闻公告等,可以考虑做成静态页面放在服务器上,这样第一是能抗住大流量的访问,第二也是更加安全一些,打开速度上有保证. 二.正文 1.什么是静态化 就比如我们平时写项目的时候,大部分的页面都是会传参数进去,通过php标签把这些参数展示出来.因为我们的参数随时可以变化,所以页面上的内容也跟着参数变化,这就是动态化的页面.与

  • jQuery简单实现QQ空间点赞已经取消点赞

    看到有网友制作了对空间好友的动态点赞,加了个以及取消赞的功能.直接运行的脚本 好友动态点赞代码 jQuery("a.qz_like_btn_v3[data-clicklog='like']").each(function(index,item){ console.log(item); jQuery(item).trigger('click'); }); jQuery(window).scroll(function(){ jQuery("a.qz_like_btn_v3[dat

  • 使用Redis实现点赞取消点赞的详细代码

    前言 异步实现 代码实现: /** * * @param userId 点赞的人 * @param type 点赞与取消点赞的表示 * @param textId 文章ID * @param entityUserId -- 被点赞的人,文章作者 */ private void like(long userId,int type,int textId,long entityUserId){ redisTemplate.execute(new SessionCallback() { @Overrid

  • php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)

    记录每个赞的点赞用户,以及对赞的数量统计 首先判断用户是否点赞.根据是否点赞,载入不同的html,调用不同的方法 已点赞 如果已点赞,显示已点赞的html,进行取消点赞操作 未点赞 如果未点赞,显示未点赞的html,进行点赞操作 对于不同操作,对数据库进行增加或减少操作.同时对于不同用户的点赞,进行增加记录或删除记录操作.通过控制不同按钮的背景,来显示不同的效果.通过记录不同用户的用户id和赞的id之间的关系,进行不同点赞的限制. 效果演示 当用户id为1时,进行点赞,点赞数加1 更改用户id,

  • Android 仿微博的点赞功能的实现原理(持续点赞再取消)

    产品需求,实现类似微博的持续点赞再取消功能,因为自己也偶尔刷微博,对这功能有一定的使用上的了解, 至于微博点赞的具体实现我并不知道,微博点赞在断网的情况下依然能点赞,不会提示网络异常,等有网络之后 重新刷新,实际是没有点赞的,那就针对这现象去实现吧. 避免并发,减少CPU压力,我个人会想到 HandlerThread ,不懂可以自行科普,这里只说我实现的点赞功能原理. private Timer mTimer;//定时器 private TimerTask mTask; mMap = new H

随机推荐