vue3.0+antdesign2.0实现的简易多人账单计算器

最新推荐文章于 2023-02-16 16:45:35 发布
最新推荐文章于 2023-02-16 16:45:35 发布
阅读量310 收藏 2
点赞数
分类专栏： 小工具 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cong_user/article/details/115134328
版权

简介

多人共同消费时可以帮助计算各自的开销
主要使用库：vue3.0，antdesign2.0
主要三步流程：

  1. 选人
  2. 选谁花费，谁参与
  3. 得出结果

应用场景

a,b,c,d 早上吃了生煎
a,b,c 中午吃了火锅
b,c,d 晚上吃了烧烤
要计算各自的开销

说明

  1. 名字不填或者相同时会去重
  2. 填完第二部返回第一步删除值会影响第二部的结果
  3. 代码优化中

应用截图

github地址

https://github.com/congyaqwq/account

cong_user
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3计算器的制作
weixin_68257411的博客
06-30 599
计算器的制作
ant-design-colors:蚂蚁设计的调色板计算器
05-09
蚂蚁设计颜色 :artist_palette: 调色板计算器。 安装 $ npm install @ant-design/colors // or $ yarn add @ant-design/colors 用法 $ npm install @ant-design/colors --save import { red , volcano , gold , yellow , lime , green , cyan , blue , geekblue , purple , magenta , grey } from '@ant-design/colors' ; console . log ( blue ) ; // ['#E6F7FF', '#BAE7FF', '#91D5FF', ''#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#
vue3 实现 计算器案例
前端开发小白9527
03-24 2739
注：功能并不完整，主要练习vue3的书写方式 <template> <h3 class="title">计算器</h3> <div class="MyComputed"> <div class="result"> <div class="text"> <el-tag type="" v-model="result">{{ result }}</el-tag>
ant组件遍历可加减的input框以及按钮，实现按钮控制单独的input框
weixin_69903461的博客
11-10 354
定义一个新的数组list，每遍历一次给数组添加一个新的空值，然后点按钮时，使用index值将，list数组里面的值就行修改即可.
ant-design-vue 根据后端返的字段状态，累加计算总数据项，已填数据项和未填数据项
花椒和蕊的博客
06-18 783
近期的项目是用ant-design-vue框架 业务逻辑是从后端返回的接口中，有一个字段状态是null。通过编辑按钮输入内容后，null的状态改变。 此时要统计列表总数据项，已填数据项和未填数据项 直接上代码，模板区 在data中准备个对象 拿到数据之后，循环数组，判断条件的意思是这个值不为空，代表有内容，有内容就自加加。 总数据项用的是res.total,如果没有，可以用res.rows.length，就是数组的长度也可以拿来求总和 ...
使用ant-design-vue的button组件实现计数器
richest_qi的博客
06-16 1023
新建项目 本例使用的是vue3。 vue create demo Counter组件 // Counter.vue <template> <div>{{count}}</div> <a-button type="primary" @click="add" class="btn">加</a-button> <a-button type="primary" @click="sub" class="btn">.
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
vite-vue3-admin：基于vite2.0 + vue3.0 + ant-design-vue2.0 +打字稿挂钩
03-03
则需要再次刷新页面请求接口使用了Vue3.0全家桶，ant-design-vue2.0和typescript4.0，实践vue3.0的新特性以及玩法，不得不说vue3.0的组成API比例于vue2.0的Options API灵活很多，让我们可以灵活地组合组件逻辑，我们...
vue3-antd-admin:基于vue-clivite + vue3.0 + ant-design-vue2.0 +打字稿钩子的基础后台管理系统模板RBAC的权限系统，JSON架构动态表单，动态表格，漂亮的锁屏界面
03-11
使用了Vue3.0全家桶，ant-design-vue2.0和typescript4.0，实践vue3.0的新特性以及玩法，不得不说vue3.0的组成API比例于vue2.0的Options API灵活很多，让我们可以灵活地组合组件逻辑，我们可以很轻松的使用hooks的...
使用vue3+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统.zip
最新发布
01-22
Vue 3.2 -- 使用vue3+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统、动态菜单、国际化、mock数据、表格集成快速使用等功能，简洁干净开箱即用。. 各领域数据集，工具源码，适合毕业设计、课程设计...
html5集合Vuejs开发商品日常卖记录、统计收入结果webapp项目代码
05-25
使用html5集合Vuejs开发商品日常卖记录、统计收入结果webapp项目代码，使用了localstorage本地缓存技术，ios苹果端可以保存到桌面使用
AntDesign的调色板计算器
08-11
Ant Design的调色板计算器
vue3.0+antd2.0 后台管理系统项目demo.zip
01-02
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
利用Ant design组件实现票据金额动态显示
sakura的博客
08-17 813
这个功能的需求是这样的，财务要求在打开页面的时候显示总票据金额，然后选择复选框的时候这个票据金额就显示的是被选择的数据的票据金额。 显示效果如图
uni-app+vue+后台管理实现记账流水功能的移动应用
weixin_42304413的博客
09-03 1199
记账小程序，实现用户可以通过小程序来记录自己的支出收入账单，以及查看流水 2、还设置有PC端可以按时间来查询准确的流水记录 3、小程序是通过uni-app其中运用vue框架+vant(UI框架)设计的 4、PC端后台是Vue+Element-U实现的后台系统。 项目模板地址,只有前端部分 uni-app项目:https://gitee.com/pokey_chen/record-life 后台管理系统：https://gitee.com/pokey_chen/remember-bill-platf
vue做购物清单总结记录
weixin_44006116的博客
05-29 640
背景 囫囵吞枣的看了一遍vue，做这个理解一下很浅显的知识（没有经验，有点乱七八糟），算是第一版，以后每进步一些能改的话就改一点。 结果图（css还是不熟练） - 代码 四个文件： App.vue <template> <div> <hr> <h3>购物清单</h3> <u...
Vue 初接触实战之账单组件
weixin_33694620的博客
08-15 511
Vue作为一个构建数据驱动web界面的库，是去年最火的MVVM风格库之一。Vue的用起来有Angular的影子，把很多自定义指令注入html，又吸收了React的优点和精华。比如与Vue的配套使用的Vuex就是从Redux和Flux中借鉴了不少思路。 Vue从去年的下半年开始火起来，目前在Awesomes前端资源库的热度排行里面处于Top...
vue仿支付宝年度账单_2020支付宝年度账单查询入口
weixin_33553051的博客
01-08 717
2021年刚刚开始支付宝便给了你一个好好工作的理由——“你有一封2020年的来信”2020年度账单已上线！新鲜出炉的支付宝年度账单可查看每个月的支出情况包含美食、穿搭、住房、出行、日用、教育、娱乐、运动等方面如何查看支付宝年度账单方法一：打开“支付宝”APP，在搜索栏输入“2020年度账单”，点击查看——方法二：打开“支付宝”APP，搜索“年账单”点击最上方“你有一封2020年的来信”。...
实验1 Vue3项目案例——简易计算器
boxuestudio的博客
02-16 2622
vue3+typescript+vite 简单计算器
vue3.0+ant-design-vue写一个登录功能和表单验证，登陆逻辑，退出逻辑
03-14
首先，你需要在 Vue3.0 中安装 ant-design-vue 组件库。然后，你可以使用 ant-design-vue 提供的 Form 组件来创建一个登录表单。在表单中，你可以使用 ant-design-vue 提供的 Input 组件来创建用户名和密码输入框。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值