Input输入框数值与金额格式的互换（拿来即用的完美组件）

于 2024-09-03 19:02:32 发布
阅读量19 收藏
点赞数
分类专栏： #前端组件库 文章标签： vue.js 前端 javascript elementui html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu__yuan/article/details/141598834
版权

一、前言

       实际的页面开发中，需要输入金额类型的输入框比较常见，这类输入框根据实际的业务场景都是要进行个性化的组件封装，本文借助自己封装的一个输入框组件 NumberToAmount.vue 来讲述el-input 输入框中数值与金额格式的互换方法，组件包含的功能如下：

1、限制了输入框只允许输入数字和小数点；

2、如果输入了非法数值，比如123.45.678，则自动替换为0；

3、限制了输入的最大金额为999999999.99，超过该值则自动替换为999999999.99；

4、限制了金额最多保留2位小数，超过则自动进行四舍五入操作；

5、输入框失去焦点时，自动将输入的数值类型转换为金额类型（如123 --> 123.00；023.9 --> 23.90；3333.5678 --> 3,33

了解本专栏 订阅专栏 解锁全文 超级会员免费看
【金融科技蚂蚁】
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
VUE面试题（3）--vue常见面试题
MingL520的博客
05-21 512
除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。[info]举个聚焦输入框的例子，如下：autofocus在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。// 注册一个全局自定义指令 `v-focus`// 当被绑定的元素插入到 DOM 中时……// 聚焦元素el.focus()})如果想注册局部指令，组件中也接受一个directivesfocus: {// 指令的定义。
React基础笔记
l529936997的博客
07-26 538
ECMAScript6 1、ES6简介 1.1、什么是ES6 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 1.2、ECMAScript和JavaScript的关系 一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？ 要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript
使用mpvue开发小程序教程（四）
pengjunlee的博客
08-22 1438
【原文地址】mpvue入门系列教程： 如何在mpvue中正确的引用小程序的原生自定义组件 使用mpvue开发小程序教程（六） 使用mpvue开发小程序教程（五） 使用mpvue开发小程序教程（四） 使用mpvue开发小程序教程（三） 使用mpvue开发小程序教程（二） 使用mpvue开发小程序教程（一） 在上一章节中，我们将vue-cli命令行工具生成的代码骨架中的src目录清理了一...
React基础入门 与 ES6
estrusKing的博客
07-12 707
文章目录ECMAScript61、ES6简介1.1、什么是ES61.2、ECMAScript和JavaScript的关系1.3、为什么要学习ES6？2、ES6环境搭建2.1、前期准备2.2、ES6环境搭建3、let与const3.1、let命令3.2、const命令4、ES6解构赋值4.1、解构赋值概述4.2、解构模型4.3、数组的解构赋值4.4、对象的解构赋值4.5、解构赋值注意事项4.6、解构赋值的用途5、字符串、函数、数组、对象的扩展5.1、模板字符串5.2、字符串扩展方法5.3、函数的扩展5.4、数
android安卓源码海量项目合集打包-1
热门推荐
chenhao0568的专栏
06-11 13万+
下载地址 最后更新共计113个分类5177套源码29.2 GB。 卷 新加卷 的文件夹 PATH 列表 卷序列号为 00000200 5E7A:7F30 F:. ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签的灵活运用.rar │ │ Android 实现 标签 拖动 改变位置.rar │ │ android 流式布局和热门标签.zip │ │ ...
使用mpvue开发小程序
qq_20759961的博客
04-24 406
（一） 前段时间，美团开源了mpvue这个项目，使得我们又多了一种用来开发小程序的框架选项。由于mpvue框架是完全基于Vue框架的（重写了其runtime和compiler），因此在用法上面是高度和Vue一致的（某些功能由于受限于小程序环境本身的原因而不能使用），这给使用过Vue开发Web应用的前端开发者提供了极低的切换门槛来开发小程序。 如果之前还未曾用过Vue这个框架的话，建议你可以快速浏...
vue常见面试题（二）
hrj970808的博客
11-17 1050
文章目录26.v-if和v-for的优先级27.assets和static的区别28.列举常用的指令29.vue常用的修饰符修饰符（1）.lazy（2）.number（3）.trim事件修饰符（1）.stop(2) .prevent(3).capture(4).self(5) .once(6).passive(7).事件修饰符还可以串联键盘修饰符系统修饰键.exact修饰符鼠标按钮修饰符30.数组更新检测31.Vue.set视图更新Vue.set() 响应式新增与修改数据32.自定义指令详解第一步第二步完善
HTML5面试题
YaToue
04-10 1万+
HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法， 混杂模式是一种向后兼容的解析方法。 触发...
前端2020面试题195道
weijieyuhyt的博客
01-13 1万+
HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? <!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法， 混杂模式...
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 780
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 2338
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1653
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
class 2: vue.js 3 模板语法和内置指令
ComingLiu的博客
08-29 735
vue.js 3
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 394
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
【已解决】Vue Duplicate keys detected: ‘[object Object]’
qq_34419312的博客
08-28 1062
【已解决】Vue Duplicate keys detected: ‘[object Object]’
vue part 5
E___V___E的博客
08-29 886
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
SprinBoot+Vue家政公司服务平台的设计与实现
赵广陆
08-29 809
目录 1 项目介绍 2 项目截图 3 核心代码 3.1 Controller 3.2 Service 3.3 Dao 3.4 application.yml 3.5 SpringbootApplication 3.5 Vue 4 数据库表设计 5 文档参考 6 计算机毕设选题推荐 7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和毕业答疑辅导，对于专业性数据证明一切！
react 样式和vue样式的区别
weixin_44565776的博客
08-29 471
react 和vue 样式使用注意事项
纯vue实现笔记系统
xc9711的博客
08-30 1328
只用vue前端实现笔记系统
vue a-input输入框组件中将小数点自动格式化百分比
07-13
在Vue的a-input输入框组件中，如果想要将输入的小数点自动格式化为百分比，可以通过监听输入框的值变化并进行相应的处理。 首先，需要在组件中定义一个data属性来保存输入框的值，并创建一个计算属性来将输入的值转换为百分比的格式。例如： ```javascript data() { return { inputValue: '' } }, computed: { formattedValue() { // 将输入的值转换为百分比的格式 if (this.inputValue === '') { return ''; } const value = parseFloat(this.inputValue); if (isNaN(value)) { return ''; } return (value * 100).toFixed(2) + '%'; } } ``` 然后，在模板中将输入框的值绑定到data中的inputValue属性，并将显示的值绑定到计算属性formattedValue。同时，监听输入框的值变化，将输入的值更新到data中的inputValue属性。例如： ```html <template> <a-input v-model="inputValue" @input="handleInput" /> <div>{{ formattedValue }}</div> </template> ``` 最后，实现handleInput方法来监听输入框的值变化，并在输入框失焦时更新输入框的值。例如： ```javascript methods: { handleInput() { // 在输入框失焦时更新输入框的值 this.inputValue = this.inputValue.replace('%', ''); } } ``` 通过以上步骤，就可以实现在Vue的a-input输入框组件中将小数点自动格式化为百分比的功能了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

【金融科技蚂蚁】

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值