【收藏 / 取消收藏】uniapp&vue开发，实现点击收藏/取消收藏功能

已于 2022-12-09 15:16:41 修改
阅读量4.7k 收藏 58
点赞数 8
分类专栏： uniapp Vue 文章标签： vue.js 前端 javascript
于 2022-07-01 17:15:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48596030/article/details/125562337
版权
uniapp 同时被 2 个专栏收录
65 篇文章 0 订阅 ¥99.90 ¥299.90
订阅专栏 超级会员免费看
Vue
35 篇文章 0 订阅 ¥99.90 ¥299.90
订阅专栏 超级会员免费看

一、实现效果如下：

在这里插入图片描述
在这里插入图片描述

二、代码如下：

<!-- 收藏 -->
<view class="collectbox">
	<!-- 未收藏 -->
	<image v-if
了解本专栏 订阅专栏 解锁全文 超级会员免费看
小跳不会Coding
关注
  • 8
    点赞
  • 踩
  • 58
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
订阅专栏
Vue+Bootstrap收藏（点赞）功能逻辑与具体实现
01-18
Vue+Bootstrap收藏（点赞）功能逻辑与具体实现（原创），供大家参考，具体内容如下 点赞功能逻辑 点赞功能说明：连接了数据库，在有登录功能的基础上。 点赞功能具体实现目标，如下： 1、用户点击一次加入收藏，数量加一，再次点击取消收藏，数量减一 ； 2、当多用户收藏，喜欢数量累加 ； 3、如果用户已收藏，显示红心（点亮图标），未收藏，否之。 ； 点赞功能说明：点赞功能用到两个表，点赞表和数据表的count。 功能分析： 具体实现如图，可把该功能分为两个部分，分别实现。 1.红心部分逻辑： 1.1 加载数据时显示：获取登陆者的id,通过id查询点赞表，获取该id下的所有喜欢（点赞）
vue收藏/取消收藏，点赞、取消点赞一个道理，切换图标
weixin_41970780的博客
03-06 4340
vue收藏/取消收藏，点赞、取消点赞一个道理，切换图标 <div class="zixun" @click="getFoodFindFoodDetails()"> <img :src="isLike?'../../image/Star4.png':'../../image/Star3.png'" /> <p class="aui-text-gray aui-font-size-10">{{isLike?'已收藏':'收藏'}}</p> </div&g
使用js和vue2实现菜单收藏功能
m0_67841039的博客
06-20 458
这只是一个基本的实现示例，具体实现可能需要根据你的项目需求和后端架构进行调整。
vue 收藏和取消收藏的点击事件
m0_56471534的博客
10-17 2329
点击“取消收藏“，图标切换，文字变为“收藏“，收藏状态变为”未收藏“，刷新页面”未收藏“数据不再显示
Vue收藏/取消收藏
m0_58158705的博客
12-01 788
Vue点击收藏/取消收藏
Vue之点击收藏与取消收藏
weixin_52418790的博客
01-23 4727
思路 通过条件运算符，给定图片一个属性，点击改变属性值 未点击时，图标灰，默认值false 点击时，图标亮，改变为true 再次点击时，图标灰，改为false 示例 <div> <img :src="isActive===true?'static/image/c_icon1.png':'static/image/c_icon.png'" @click="gostore"> </div> methods: { gostore(){ //收藏 c
vue 实现收藏功能
2301_76343523的博客
12-16 1028
（1）listQuery里接收后端参数，为了获取商品列表数据。
vue实现扫码功能
10-15
在 Vue 中实现扫码功能，通常需要借助浏览器的API或者第三方库来访问设备的摄像头并解析二维码或条形码。在这个示例中，开发人员利用了HBuilder集成的H5+ SDK，这使得在Vue应用中直接调用原生的扫码功能成为可能。 ...
Vue 实现一个命令式弹窗组件功能
10-16
实现命令式弹窗组件是Vue开发中一项基础但实用的技能，它不仅涉及Vue的实例化、挂载和销毁，还涉及到组件的设计思想和用户交互处理。通过上述知识点的详细解释，读者可以进一步深入理解Vue组件的动态使用和控制，...
uniapp实现， 小程序 app端 仿京东，淘宝，苏宁易购等功能的电商项目-vue_uniapp_shoppp.zip
11-06
【标题】"uniapp实现，小程序app端仿京东，淘宝，苏宁易购等功能的电商项目-vue_uniapp_shoppp.zip"所代表的是一个使用uniapp框架开发的电商项目，旨在模仿京东、淘宝和苏宁易购等知名电商平台的功能。uniapp是一个...
wx323外卖点餐的设计与实现-ssm+vue+uniapp.zip（可运行源码+sql文件+文档）
最新发布
07-05
本微信小程序外卖点餐的设计与实现有管理员和用户两个角色。...在商品详情界面，可以对商品进行收藏和下单操作，点击菜品图片右下角的五角星，是收藏操作，双击是取消，点击页面右下角的下单按钮，会进行下单操作。
星星-点击收藏/取消收藏
03-13
点击收藏/取消收藏的样式；及css和js的详细文件，希望能提供到帮助；
简单收藏功能的实现（SpringBoot,MybatisPlus,Vue）
weixin_51980608的博客
08-11 8665
收藏功能的简单实现
uni-App 实现收藏功能
code袁的博客
02-12 1335
首先拿到缓存中的数据，通过findIndex（）函数判断缓存中数据的goods_id是否和页面中的goods_id是否相等。若相等则传回index值大1则说明缓存中存在数据，调用点击事件应该要删除数组的数据splice（）,否则通过push（）添加数据，并将isCollect设置为true。
springboot+vue实现添加收藏/取消收藏按钮变换 刷新页面无影响！
CCA7587的博客
01-25 1077
springboot+vue实现添加收藏/取消收藏按钮变换
Vue前端商品的添加收藏，删除收藏以及清空收藏的操作（基于vant-ui）
bentou_的博客
04-09 6751
Vue前端商品的添加收藏，删除收藏以及清空收藏的操作
uniapp 收藏功能实现及组件封装
不想起床
10-12 5208
文章目录前言一、uniapp小程序收藏功能思路分析：1 父组件向子组件传值2 子组件接收到值，将数据初始化子组件利用属性绑定，根据当前的type值来显示已收藏还是未收藏点击收藏，切换状态，并且调用更新数据接口使用步骤引入uniapp中的icons 前言 一、uniapp小程序收藏功能 思路分析： 父组件引入子组件.并且父组件通过属性绑定向子组件传递数据 子组件利用props来接收父组件传来的值，并且进行数据数据初始化赋值 子组件利用属性绑定，根据当前的type值来显示已收藏还是未收藏 点击收藏，切换状态
Vue3 使用vant actionBar组件后对icon图标的点击切换效果/点击收藏/取消收藏
Igiveufireworks的博客
04-15 2643
制作收藏的点击收藏、取消收藏的图标切换效果 <template> <van-action-bar> <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" /> <van-action-bar-icon icon="cart-o" text="购物车" to="/cart"/> <van-action-bar-icon icon="star-o" text=
uniapp-文章收藏功能实现
weixin_41558808的博客
01-10 3090
从零开始uniapp
uniapp实现场地预定功能
07-10
UniApp 是一个基于 Vue.js 的跨平台开发框架，可以用于开发同时运行在多个平台上的应用程序。要实现场地预定功能，可以按照以下步骤进行： 1. 创建项目：使用命令行或者可视化工具创建一个 UniApp 项目。 2. 定义数据模型：根据场地预定的需求，定义场地和预定的数据模型。例如，可以创建一个场地列表和预定列表的数据模型。 3. 创建页面：使用 Vue.js 的语法和组件创建相关的页面。可以创建一个展示场地列表的页面和一个预定场地的页面。 4. 实现场地列表：在场地列表页面中，从后端获取场地数据，并展示在页面上。可以使用网络请求库（如 axios）向后端发送请求，并使用 Vue.js 的数据绑定将数据渲染到页面上。 5. 实现预定功能：在预定页面中，用户选择一个场地并填写预定信息。通过表单校验和提交，将预定信息发送给后端。后端处理预定请求，并返回相应的结果（如成功或失败）。 6. 更新状态：根据后端返回的结果，更新页面的状态。例如，如果预定成功，可以提示用户预定成功并更新预定列表页面的数据。 7. 添加其他功能：根据需求，可以添加其他相关功能，如查看预定详情、取消预定、修改预定等。 以上是一个简单的实现场地预定功能的步骤，具体的实现细节和流程可以根据项目需求进行调整和扩展。希望对你有帮助！如果有更多问题，请继续提问。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值