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

最新推荐文章于 2024-04-09 10:43:49 发布
原创 最新推荐文章于 2024-04-09 10:43:49 发布 · 429 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

该应用详细介绍了如何利用Vue3.0和AntDesign2.0构建一个多人消费账单拆分工具。用户可以依次选择参与者和各自消费的项目，程序会自动计算每个人的开销。应用场景包括朋友聚餐等场合，解决了共同消费后计算账单的难题。代码仍在优化中，项目已上传至GitHub供参考。

简介

多人共同消费时可以帮助计算各自的开销
主要使用库：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

vue3 实现 计算器案例
前端开发小白9527
03-24 3170
注：功能并不完整，主要练习vue3的书写方式 <template> <h3 class="title">计算器</h3> <div class="MyComputed"> <div class="result"> <div class="text"> <el-tag type="" v-model="result">{{ result }}</el-tag>
vue3.0+ Ant Design Vue 创建项目,超级简单~
m0_49789433的博客
04-20 2376
先确定下是不是3.0哦 ,下面的方式是3.0的方法,vue2.0的方法在官网 https://www.antdv.com/docs/vue/introduce 确定3.0需要打开main.js 写法是 import { createApp } from 'vue' 这样的 就是 3.0拉 1.先引入 npm install ant-design-vue --save 2.安装好之后打开main.js import Antd from 'ant-design-vue'; cre..
AntDesign的调色板计算器
08-11
Ant Design的调色板计算器
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 &#39;@ant-design/colors&#39; ; console . log ( blue ) ; // [&#39;#E6F7FF&#39;, &#39;#BAE7FF&#39;, &#39;#91D5FF&#39;, &#39;&#39;#69C0FF&#39;, &#39;#40A9FF&#39;, &#39;#1890FF&#39;, &#39;#096DD9&#39;, &#39;#0050B3&#39;, &#39;#003A8C&#39;, &#39;#
使用ant-design-vue的button组件实现计数器
richest_qi的博客
06-16 1225
新建项目 本例使用的是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">.
Vue3计算器的制作
weixin_68257411的博客
06-30 739
计算器的制作
精选资源
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+...
精选资源
基于Vue3.0 + Ant Design的PC端学生全面画像系统设计源码
10-03
开发者可以通过分析源码来深入理解Vue3.0、Ant Design以及前后端交互的实现方式，这无疑对提升开发者的技能和推动相关技术的普及与应用具有重要意义。 最后，该系统还包含了readme.txt文件，这通常是项目的第一份...
精选资源
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的...
基于vite2.0 + vue3.0 + ant-design-vue2.0 + typescript hooks 的基础后台管理系统模板 RBAC的权限系统
最新发布
10-16
Ant-design-vue2.0是Ant Design的Vue实现，为前端应用提供了高质量的React组件库。这一组件库广泛应用于后台管理系统的UI界面中，它的组件丰富且具备高度可定制性，使得开发者能够快速构建出美观且功能完善的界面。 ...
html5集合Vuejs开发商品日常卖记录、统计收入结果webapp项目代码
05-25
使用html5集合Vuejs开发商品日常卖记录、统计收入结果webapp项目代码，使用了localstorage本地缓存技术，ios苹果端可以保存到桌面使用
在Ant Design Vue（v1.7.8）a-table组件中实现余额自动计算
qq_27361945的博客
12-25 617
在Ant Design Vue 表格中实现余额自动计算，公式为：剩余量 = 库存量 - 消耗量。
利用Ant design组件实现票据金额动态显示
sakura的博客
08-17 958
这个功能的需求是这样的，财务要求在打开页面的时候显示总票据金额，然后选择复选框的时候这个票据金额就显示的是被选择的数据的票据金额。 显示效果如图
使用vue.js制作一个简易的计算器
weixin_67416447的博客
04-09 409
【代码】使用vue.js制作一个简易的计算器。
Vue实现简单的计算器
唯你映我眼博客
09-28 239
首先呢， 看了一下没找到带数字键盘的demo，于是乎自己写了个记录一下。 Vue+antd 组件 原理也超级简单，利用eval 计算 大佬轻点喷 <template> <div id="app" style="width: 800px"> <a-row> <a-col> <a-input type="text" value="" v-model="rel"></a-input>
【vue.js】vuex实现简单的计算器（加减乘除）demo
weixin_39068791的博客
08-05 6456
效果图： 代码： &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script src="vue.js"&a
Vue 初接触实战之账单组件
weixin_33694620的博客
08-15 594
Vue作为一个构建数据驱动web界面的库，是去年最火的MVVM风格库之一。Vue的用起来有Angular的影子，把很多自定义指令注入html，又吸收了React的优点和精华。比如与Vue的配套使用的Vuex就是从Redux和Flux中借鉴了不少思路。 Vue从去年的下半年开始火起来，目前在Awesomes前端资源库的热度排行里面处于Top...
vue做购物清单总结记录
weixin_44006116的博客
05-29 737
背景 囫囵吞枣的看了一遍vue，做这个理解一下很浅显的知识（没有经验，有点乱七八糟），算是第一版，以后每进步一些能改的话就改一点。 结果图（css还是不熟练） - 代码 四个文件： App.vue <template> <div> <hr> <h3>购物清单</h3> <u...
ant-design-vue 根据后端返的字段状态，累加计算总数据项，已填数据项和未填数据项
花椒和蕊的博客
06-18 894
近期的项目是用ant-design-vue框架 业务逻辑是从后端返回的接口中，有一个字段状态是null。通过编辑按钮输入内容后，null的状态改变。 此时要统计列表总数据项，已填数据项和未填数据项 直接上代码，模板区 在data中准备个对象 拿到数据之后，循环数组，判断条件的意思是这个值不为空，代表有内容，有内容就自加加。 总数据项用的是res.total,如果没有，可以用res.rows.length，就是数组的长度也可以拿来求总和 ...
Vue 3.0+TypeScript实现微信网页授权登录教程
本项目“vue-wechat-login”即为一个针对微信网页授权登录功能的Vue 3.0结合TypeScript的实现示例。 **知识点一：Vue 3.0** Vue.js是一款流行的JavaScript框架，用于构建用户界面。它以数据驱动和组件化的思想，让...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值