vue-currency-input 金额组件的安装及使用

vue-currency-input 使用该金额组件无需更改原代码

能实现输入框允许输入数字规则的相关限制，方便灵活

一：npm安装

npm install vue-currency-input

二：Main.js文件内全局挂载

import VueCurrencyInput from 'vue-currency-input'Vue.use(VueCurrencyInput)

三：页面计算属性中定义对象

computed: {editVisible: {// 金额组件addFeeOnMoney() {return {currency: null, // 显示的货币代码 默认'EUR'distractionFree: true, // 是否忽略多余的小数 默认truevalueAsInteger: false, // 是否作为整数处理 默认falseautoDecimalMode: false, // 输入时，是否默认添加小数点 默认falseprecision: 2, // 小数位 默认undefinedvalueRange: {min: 0, max: 999999999.99}, // 数据范围 默认undefinedallowNegative: false // 是否允许负数 默认false};}
},

四：使用

// 在input框标签内加入
v-currency="addFeeOnMoney"
// 例：
<el-input v-model="对象.对象属性" placeholder=""v-currency="addFeeOnMoney"
/>

注：通过该组件双向绑定最终得到的数据是一个带有逗号(千分位分隔符),须手动去除

千位分隔符去除方式：

// 假设双向绑定得到的数据为aa
aa=(aa+"").replace(/,/g,"");

vue-currency-input 金额组件的安装及使用相关推荐

vue/cli是什么?vue/cli如何使用? 入门篇(安装创建,组件使用,定义路由,项目导出) ∠( °ω°)／前端知识
文章目录简介安装安装nodejs nvm npm换源单次换源永久换源方法一方法二 Vue/cli安装创建Vue/cli项目解决常见错误用命令行创建项目可视化界面创建项目目录简介 ...
Vue组件封装 ——input 输入框组件
一.基础准备工作 1.创建一个基础的vue项目包 2.创建components文件夹,用于存放组件,新建input.vue组件,可以自己取个名字 <script> export def ...
vue导入导出excel组件封装
vue导入导出excel组件可直接使用参考以下博客,侵删参考的博客 ##一: 项目安装依赖 npm install --save xlsx 在项目中创建文件夹及文件如下图: excel-impo ...
vue 项目总结一组件开发的配置和例子
原文地址:https://segmentfault.com/a/1190000012410259?_ea=2993723 先上 src 文件夹的结构图: 文件及文件夹作用 App.vue App.vu ...
Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现组件化即是对某些可以进行复用的功能进行封装的标准化工作标准:要想组件能够成功组合在一起,每个组件必须要有标准分治:将不同的功能封装到不同的组件 ...
【Vue】Vue学习笔记——UI组件库和常用插件
文章目录 6. UI组件库和常用插件 6.1 Element-ui 6.2 Vue-router 6.2.1 基本用法 6.2.2 跳转 6.2.3 路由嵌套 6.2.4 路由参数传递 6.3 Axi ...
使用vue创建一个遮罩组件_用于输入遮罩的另一个Vue组件
使用vue创建一个遮罩组件语音输入蒙版 (vue-input-mask) Yet another Vue component for input masking. Based on react-in ...
vue图片裁剪组件_使用Vue-Rx的Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
Vue学习笔记05 组件的自定义事件-组件通信-$nextTick-脚手架解决ajax跨域-插槽-过渡动画
文章目录 Vue学习笔记05 父组件给子组件传值注意点子组件给父组件传值父组件接受子组件的传值通过函数组件的自定义事件事件绑定的第一种写法 @或v-on 事件绑定的第二种写法:使用ref ...

vue-currency-input 金额组件的安装及使用

vue-currency-input 使用该金额组件无需更改原代码

一：npm安装

二：Main.js文件内全局挂载

三：页面计算属性中定义对象

四：使用

千位分隔符去除方式：

vue-currency-input 金额组件的安装及使用相关推荐

最新文章

热门文章

vue-currency-input 金额组件的安装及使用

vue-currency-input 使用该金额组件无需更改原代码

一：npm安装

二：Main.js文件内全局挂载

三： 页面计算属性中定义对象

四：使用

千位分隔符去除方式：

vue-currency-input 金额组件的安装及使用相关推荐

最新文章

热门文章

三：页面计算属性中定义对象