Vue自定义组件（一）货币输入框

最新推荐文章于 2026-05-20 15:49:36 发布
原创 最新推荐文章于 2026-05-20 15:49:36 发布 · 3.5k 阅读 · 6
标签
#vue-js #组件化
本文介绍如何使用Vue.js创建一个自定义组件——货币输入框，该组件能够自动过滤非法字符并限制小数点后两位。通过父子组件通信实现动态效果，并附带代码示例。

最近看到有人提这个需求，正好也在学习自定义组件，就试着写一下

参考: vue官方文档

动态效果，后面是代码展示。

效果图

项目演示

输入非法字符会自动过滤，小数点后只允许输入两位(ps:都可以自行修改)

父组件代码

<template>
    <div id="app">
        <h1>自定义输入框——金额</h1>
        <p style="color:red">这是爸爸：{
   
   {total}}</p>
        这是儿子：<currency-inp
最低0.47元/天 解锁文章
vue-currency-input:轻松输入Vue.js的货币格式数字
04-28
Vue货币输入 Vue货币输入插件可轻松输入货币格式的数字。 它提供了一个独立的组件（ <currency> ）和一个自定义Vue指令（ v-currency ），用于使用货币格式功能来装饰现有的输入组件。 特征 和零依赖关系 键入时格式化 基于语言环境的，基于ISO的货币格式，基于 无干扰（隐藏焦点格式以便于输入） 允许将值作为整数处理，以实现全精度 自动十进制模式（使用最后输入的数字作为十进制数字自动插入十进制符号） 内置值范围验证 与流行的框架（例如或输入组件一起使用 现场演示 查看，看看它的运行情况。 快速开始 安装npm软件包： npm install vue-currency-input # OR yarn add vue-currency-input 在您的main.js添加Vue插件： import Vue from 'vue' import V
vue-currency-input-轻松输入Vue.js的货币格式数字。-Vue.js开发
05-27
Vue货币输入Vue货币输入插件可轻松输入货币格式的数字。 它同时提供了一个独立的组件（ ）和自定义的Vue指令（v-currency），用于使用货币格式功能修饰现有的输入组件。 具有微小的捆绑包大小和零依赖关系键入时的格式基于Intl.NumberFormat的区域设置依赖于ISO的货币格式（免干扰）（将格式隐藏在焦点上以便于输入）
Node.js SQLite性能终极指南：为什么better-sqlite3比其他方案快11倍？
最新发布
gitblog_00960的博客
05-20 965
在Node.js生态系统中处理本地数据库时，开发者常常面临一个关键抉择：选择传统的异步SQLite库还是创新的同步API设计。better-sqlite3作为Node.js中最快的SQLite3库，以其独特的同步API实现了比异步方案更好的并发性能，这一反直觉的设计理念使其在性能基准测试中领先竞争对手11.7倍。本文将深入分析这一技术奇迹的实现原理，并提供从技术选型到实际部署的完整指南。 📌
vue封装金额输入的input框
shuleijia的博客
08-06 6415
前言：写vue管理系统的时候，总是会遇到金额输入框，网上找到的总是能发现一些隐蔽bug。所以小编就想能不能封装一个element-ui中el-input的金额输入框呢？ 说干就干，上效果 小编这里一共封装了5中用法，基本是够使用的了，而且是支持element属性的，好了。其他的就不说了，直接上代码。 第一步： 1.在components中新建文件夹currency，新建index.js import Currency from './src/currency.vue' Currency..
Vue货币输入框
weixin_44216543的博客
11-29 1334
vue 零基础实现国际货币互相切换
vue-currency-input 金额组件的安装及使用
weixin_45772814的博客
05-06 2807
vue-currency-input 使用该金额组件无需更改原代码 能实现输入框允许输入数字规则的相关限制，方便灵活 一：npm安装 npm install vue-currency-input 二：Main.js文件内全局挂载 import VueCurrencyInput from 'vue-currency-input' Vue.use(VueCurrencyInput) 三： 页面计算属性中定义对象 computed: { editVisible: { // 金额组件 addFee
组件封装--CurrencyInput货币数字输入框组件
qq_57491020的博客
03-20 1441
组件封装--CurrencyInput货币数字输入框组件。
vue使用自定义事件的表单输入组件（日期组件与货币组件）
hanxue_tyc的博客
11-03 1614
自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。 v-model的实现原理 : <input v-model="something"> 这不过是以下示例的语法糖： <input v-bind:value="something" v-on:input="something = $event.target.value">在开发项目中，当遇
vue实现货币过滤器
curry_zhao的博客
02-08 6957
自定义事件也可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。 所以要让组件的 v-model 生效，它必须： 接受一个 value 属性在有新的 value 时触发 input 事件 代码如下： HTML：   {{ message }}              Total: ${{ total }} J
【亲测免费】 推荐使用：Vue.js 的强大货币格式化组件 —— v-money
gitblog_00077的博客
05-17 911
推荐使用：Vue.js 的强大货币格式化组件 —— v-money 在开发 web 应用时，尤其是在处理金融数据或电商价格展示时，精确且易于阅读的货币格式化至关重要。为此，我们向您强烈推荐一个基于 Vue.js 的轻量级组件——v-money。这个强大的工具可以帮助您轻松实现货币格式化的输入与显示。 项目介绍 v-money 是一款专为 Vue.js 设计的货币格式化插件，它提供了指令和组件两种形...
vue2.6、pnpm环境下，vue-currency-input的用法及注意事项
ABCDEivol的博客
07-18 1194
在开发公司项目时，需要控制用户输入格式，把用户输入的值转换成其他国家的数字分隔形式，并在离焦后进行小数位数的控制，不足的需要补0，vue-currency-input就是一款能够很好实现这些需求的插件。然而在实际使用中还是不太顺利，此篇文章就用来记录安装使用过程中所遇到的问题以及我的解决方式。
v-currency-用于格式化货币的Vue组件。-Vue.js开发
05-27
v-currency一个用于在Vue.js中格式化货币的插件用法Vue.use（Currency，{“ type”：“ USD”，“ thousandSeparator”：true，}）; 为了使用v vcurrency一个插件，用于格式化Vue.js中的货币用法Vue.use（Currency，{“ type”：“ USD”，“ thousandSeparator”：true，}）; 为了在您的组件中使用它：导出默认{名称：'Sample'，data（）{返回{资金：[100500.945，15043.5，9909，210，44.30，-24，'tq1']}}，方法：{ getMoneys（i）{返回this。$ helpers.currency（this.moneys [i]）; }，}，要即时更改货币onChange（e）{this。$ helpers.changeCurren
【亲测免费】 推荐开源项目：Vue Currency Input - 精准处理货币输入的Vue组件
gitblog_00035的博客
01-23 572
在现代Web开发中，尤其是在涉及金融和电子商务的项目中，对货币数据的精确处理至关重要。`Vue Currency Input` 是一个专为Vue.js设计的强大且灵活的组件，它使用户能够方便地输入格式化的货币数值。这个项目充分利用了Vue的Composition API，可以将任何你喜欢的框架（如Vuetify、Quasar或Element Plus）的输入组件转换为货币输入字段。 ### 2、
vue3中金额的回显及封装金额输入框组件
一路走一路看，一边哭一边笑
06-20 2759
在项目中回显金额格式，vue3封装金额输入框组件，使用到了vue-currency-input包
Vue Currency Input：轻松实现货币格式输入
gitblog_00354的博客
01-23 623
在现代Web应用中，货币输入是一个常见但复杂的需求。为了简化这一过程，`Vue Currency Input` 应运而生。它是一个基于Vue的插件，旨在帮助开发者轻松实现货币格式的输入，同时保持代码的简洁和高效。 ## 项目介绍 `Vue Currency Input` 是一个开源的Vue插件，它允许开发者将任何输入组件（如Vuetify、Quasar或Element Plus）转换为货币输入
Vue Currency Input 常见问题解决方案
gitblog_00193的博客
01-23 1111
Vue Currency Input 是一个为 Vue.js 框架设计的货币格式化输入组件。该组件基于 ECMAScript 国际化 API (Intl.NumberFormat) 构建，支持 Vue 2 和 Vue 3，使得开发者可以轻松地将任何输入组件转变为货币输入字段。 ## 1. 项目基础介绍和主要编程语言 **项目介绍**： - Vue Currency Input 允许用户轻松输入
vue3的elementPlus中使用el-input控制用户输入正确金额，el-input-number遇到的一系列问题
CHENC0518的博客
02-23 3629
但是，el-input-number会存在一个致命的问题，尤其是对于金额方面，el-input-number会对输入的值进行四舍五入，也就是如果用户复制了一个数为。el-input-number的值就是不变，但是数组的值已经变化了，差点让我原地去世，此时，原本一个很小的需求已经花费了一个小时还没解决，我大汗淋漓。首先，我原先使用的组件是el-input-number，这个确实是一个非常好的组件，但是在某些方面，他却隐含着巨大的隐患。（但有方法确实是可以改的，但也太过麻烦）到输入框，里面的值就会自动变为。
vue中使用自定义金额格式化组件，对金额进行千分位格式化
weixin_30651273的博客
07-08 3582
分两种情况：不使用vue/cli脚手架搭建和使用vue/cli脚手架搭建的项目 一、不使用vue/cli脚手架搭建 1、该组件基于vue，element，accountingjs 2、引入相应的js文件 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> &lt...
vue3自定义金额输入框组件
yuanziming001的博客
11-12 2661
最近在自学vue3相关的知识，昨天用vue3的watch监听实现了满足日常各种情况的金额输入框，详情可见 vue3通过watch实现完美的pc端金额输入框 今天又学习了vue3封装组件相关知识，就把昨天的金额输入框封装成了一个组件，实现效果如下： 代码如下： 子组件 <template> <el-input v-model="a" @blur="amountBlur" @focus="amountFocus" :placeholder="placeholder"></
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值