avue-form 输入框限制输入金额

最新推荐文章于 2024-06-05 10:10:22 发布
最新推荐文章于 2024-06-05 10:10:22 发布
阅读量325 收藏
点赞数 3
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68840000/article/details/130382589
版权

avue的form表单配置里可以写change方法拿到输入的值并通过正则限制自己想要结果 

这样就可以通过双向绑定修改他的值并重新赋值

 

 

 但是这时候会发现值修改了,页面上的输入框还是原来的值

我们可以通过vue的$nextTick方式将里面的回调函数延迟下次DOM更逊循环结束之后执行。 在修改数据之后立即使用这个方法，获取更新后的DOM

这样就OK了 

CV战士633
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue输入框限制数字
Haines
11-05 608
<el-form-item> <el-input v-model.number="child.sort" class="w100" maxlength="10" @input.native="checkoutNumRange($event,0)" oninput="value=value.replace(/[^\d]/g,'')"></el-input> </el-form-.
vue表单添加内容到页面中
li1484155613的博客
10-05 2137
业务逻辑层 1、首先采用v-model实现数据双向绑定 2、当点击添加时将数据添加到一个空数组中 3、做一个循环 <li v-for="value in arr">{{value}}</li> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
avue-crud中双击表格变成输入框进行输入
最新发布
zzuli111的博客
06-05 230
【代码】avue-crud中双击表格变成输入框进行输入。
avue-crud 在使用输入框的时候无法输入的问题
A_droid的博客
08-17 1761
最近，在开发中遇到了一个问题，input输入框无法输入，具体的业务是，让用户输入单价，数量，自动计算出小计，同时用户也可以自己手动输入小计。 在代码实现上，我是通过使用avue-crud输入框的@input方法来监听用户输入事件，然后赋值。 以上是具体的代码，当时遇到输入框无法输入的问题，上网百度了很多的解决方法都没解决，最后，发现是小计通过v-model绑定的那个值，没有初始化，导致输入不了。 细心，再细心一点。 ...
avue+elementui设置select选择器可选可输入实现
wjx_jasin的博客
03-02 1万+
要个需求，下拉框中输入筛选和未匹配到的值输入，avue和element-ui中只实现了部分，即可输入筛选值。还达不到需求。 那么，只能改造原来的element-ui，加个事件监听即可实现。 因为使用了avue,所以写法按照avue的写法，使用插槽替换。 { label: "旧轮胎号", ...
vue中如何获取input输入的值并新增添加到表单中
m0_67402914的博客
03-16 2051
设置v-model.trim <input type="text" v-model.trim="brand"> <button @click="add">添加</button> 在方法里打印this.brand 看是否获取到 add(){ console.log(this.brand); } add按钮方法代码: (因为object对象是键对值的形式 所以是冒号:) add() { console.log(t
avue-form-design:本项目是一款基于 Avue 的表单设计器，拖拽式操作让你快速构建一个表单
08-04
更新日志文档及demo项目依赖element-ui 2.13.2+$ npm i element-ui@smallwei/avue 2.6.16+$ npm i @smallwei/avue或自行引入cdn安装组件$ npm i @sscfaith/avue-form-design或$ yarn add @sscfaith/avue-form-design...
avue前端框架-其他
06-12
Avue.js是基于现有的element-ui库进行的二次封装，从而简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，...
avue-master.zip
05-28
Avue.js2.0是基于现有的element-ui库进行的二次封装，简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，...
AVue中form表单添加自定义按钮并触发回调函数
Salt_NaCl的博客
02-14 1543
【代码】AVue中form表单添加自定义按钮并触发回调函数。
VUE+table表格里面嵌套输入框：
zhu_tian_huan的博客
05-19 1824
table表格里面加输入框
avue-design-form自定义表单目录说明
weixin_38194239的博客
07-28 3577
项目引入avue-from-design 自定义属性 1、在components中引入全部文件 修改了history.js 和custom的文件引入问题 github地址：https://github.com/sscfaith/avue-form-design 2、安装高德地图 安装（指定版本）： npm install monaco-editor@0.22.3 使用说明：https://www.yuque.com/zhengrenzhe/blog/yqz7hp 在public中index.html 中
vue组件表单数据回显验证及提交代码
CodingNoob
04-23 7683
最近项目需要到vue开发单页面，所以就研究一下表单数据的回显，验证及提交如何用vue组件的方式实现。 代码如下： &lt;template&gt; &lt;div class="index"&gt; &lt;!--header-bar&gt;&lt;/header-bar--&gt; &lt;div style="margin:20px;"&am
【avue】弹框中的表单数据被提交后，表单无法再输入，按钮无法点击
Owen的博客
11-16 3177
解决方案：loading（），以编辑功能为例： update(row, index, done, loading) { putObj(this.form).then(() => { this.getList(this.page) done(); this.$notify({ title: '成功', message: '修改成功', type: 'su
Element UI —— el-form 自定义验证规则
张静的博客
03-02 3499
自定义验证规则：金额不能超过两位小数 html代码： <el-form :model="formData" :rules="rules" ref="msgForm" label-width="120px" > <el-form-item label="商品名称:" prop="name"> <el-input v-model="formData.name"
Vue使用avue-crud表格组件的用法及参数说明（超详细）
热门推荐
随便写写...
05-25 1万+
avue-crud表格组件的详细说明，补录中
VUE之elementUI组件：输入金额的限制（两位小数、不能0或.开头 只能输入数字和.）
Super Livia
10-22 4216
参考了几种金额判断是方法整合了下方法： <el-form :model="form" :rules="rules"> <el-form-item label="金额" required prop="money"> <el-input placeholder="请输入金额" v-model="form.money" /> </el-form-item> </el-form> date(){ const
vue限制只能输数字
qq_30815659的博客
04-04 1万+
1.使用修饰符实现数字输入 在VUE中可以在v-modal后添加修饰符的形式来限制输入，比如： <input v-model.number="testValue" type="number"> .number可以实现限制数字输入，但是会有以下问题： 会出现type="number"自带样式，当然可以通过添加以下css清除 /* 普通IE浏览器 样式清除 */ input::-webkit-outer-spin-button,input::-webkit-inner-spin-but
avue 最强封装
朝花夕拾的博客
08-26 2622
封装插件 @/mixins/crud.js export default (app, option = {}) => { let mixins = { data () { return { data: [], form: {}, params: {}, api: require(`@/api/${option.name}`), loading: false, page: {},
avue-form自定义样式
09-15
avue-form是一个表单组件，可以通过修改option属性中的样式进行自定义样式的设置。具体步骤如下： 1. 首先，在引用中的表单选项(option)中，可以通过添加"class"属性来设置表单元素的自定义样式。例如，可以为input...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值