Vue iview输入框change事件replace正则替换不生效问题的解决。

ThridTianFuStreet小貂蝉

于 2024-06-24 21:02:31 发布

阅读量159

点赞数 1

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/Blues_han/article/details/139937987

版权

// 需求：输入座机号只允许输入数字和"-"
onChange(e){
	this.$nextTick(()=>{
		this.phone = e.target.value.replace(/[^0-9-]/g, '');
	})
}
解决：添加**this.$nextTick**即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ThridTianFuStreet小貂蝉

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue : iview的Form表单加正则

柒月小姐姐

10-10

992

Form里面 :model=“form” Form-item里面： prop=“departureTime” （form下面的加正则的字段） :rules=“ruleValidate.departureTime” （正则） <Form ref="detailModal" :label-width="1.5" :model="form"> <Form-item label="时间" prop="departureTime" :rules="departureTime"&.

vue 解决当数据发生变化但页面没有变化

墨茶Official 愿你在二次元有吃不完的草莓饺子(ㄒoㄒ)

12-22

1938

阅读以下两篇文章 this.$set this.$nextTick

1 条评论您还未登录，请先登录后发表或查看评论

解决iview中</Input>标签报错的方法

weixin_30657999的博客

06-30

618

（1）To turn it off, setvetur.validation.template: false. 这时错误并不会消息。（2）在git bash中输入yarn add -D eslint eslint-plugin-vue，若没有安装yarn则需要先安装，安装可采用npm的安装方法；（3）在eslintrc.js中配置，如下： 1 extends: [ ...

iview表单验证之正则验证、函数验证

weixin_30379531的博客

06-14

1447

iview表单验证之正则正则验证：代码： loginRules: { stringLength: [ { required: true, message: '该字段不能为空', trigger: 'blur' }, { pattern: /^[1-9]\d*$/, message: '该字段为整数', trigg...

vue双向绑定有时候不生效处理办法

youngfish的博客

04-28

4801

vue双向绑定有时候不生效处理办法问题：当我们给响应式的对象新增属性时，新增的属性并不会显示到页面中；对于响应式的数组，增加元素、修改数组长度时，数组的这些变化也不会反映到页面中 <template> <div> {{obj}} {{arr}} <button @click="change">Click me!</button> </div> </template> <script>

vue+iview项目正则校验的使用

Zxiuping的博客

11-23

1353

vue+iview项目正则校验的使用，手机号校验，车牌号校验

Vue 报replace is not a function，replace错误

m0_73900214的博客

07-18

1427

Vue 报replace is not a function，replace错误

解决vue项目input输入框双向绑定数据不实时生效问题

11-20

我就废话不多说了，大家还是直接看代码吧~ <input type=”text” maxlength=”11″ placeholder=”请输入联系人电话” v-model=”form.phone” /> 这样的输入框，绑定的是data中的form对象上的phone字段。 ...

vue项目移动端实现ip输入框问题

12-11

vue框架移动端做ip输入框组件，input在浏览器和微信端兼容问题。要求：只能输入数字，输入数字以外的字符（包括点、冒号等数字符号）时自动跳到下一段ip输入框. type=number类型，不会禁止点的输入。手动过滤拿不...

vue.js实现只能输入数字的输入框

10-16

在上述文档中，详细介绍了如何在Vue.js中实现只能输入数字的输入框，提供了示例代码，并讨论了一些相关的问题和解决方案。首先，实现一个简单的只能输入数字的输入框可以通过在Vue实例的`watch`属性中监听输入数据...

Vue ElementUI实现:限制输入框只能输入正整数的问题

11-19

在Vue和ElementUI框架下，实现输入框(input)只能输入正整数的需求，可以通过多种方式来达成。这里介绍四种不同的方法： ### 方法一：利用禁止按键的方法此方法通过监听`keyup`事件来阻止用户输入非正整数的字符。...

vue项目中常用正则大全

Zeng的博客

10-18

1561

vue项目中常用正则大全。

Iview 表单验证的规则总结

赵树祥的博客

06-19

2万+

参考文档： https://github.com/yiminghe/async-validator 1. 支持的基本类型 <FormItem prop="UserId" :rules=" [ { required: true, message: '请选择一项', trigger: 'change',type:'number',min:...

vue 值改变后界面没有变_vue.js - vue修改数据后页面不变化

weixin_39520880的博客

12-20

4768

问题在使用vue的时候遇到了修改数据后，页面内容没有变化√×data: funciton(){return {tempSelect: [true, true, false, true]}},methods:{changeSelect(index){this.tempSelect[index] = !this.tempSelect[index]}}其中tempSelect是一个数组，里面为true...

【js】onchange事件不被触发

博客

08-18

8660

异常现象： input输入内容后，绑定的onchange事件不触发异常原因： onchange事件，需要在input不失去焦点时，才触发解决方法： $(document).ready(function () { //改变思路去监听键盘的输入 window.document.onkeydown = function (e) { //如果当前焦点元素的id为某指定ID ...

关于通过JS操作Vue组件库的输入框的值，输入框的值不改变问题

热门推荐

XinKun的博客

03-01

3万+

一、this.$set实现什么功能，为什么要用它？当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就是解决这个问题的啦。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’). 二、怎么用它？举个例子： 1.Vu

【直接收藏】前端 VUE 高阶面试题（三）

sdasadasds的博客

08-25

332

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。vue的生命周期核心经历了四个阶段，在四个阶段的前后分别有两个钩子函数。第一阶段：数据挂载阶段：把配置项data中的属性，赋给了vue对象本身，并做了数据劫持。该阶段前后的两个钩子函数：beforeCreate和created第二阶段：模板渲染阶段：把vue对象的数据渲染到模板上。

vue输入框只能输入数字正则表达式

06-09

可以使用以下正则表达式来限制输入框只能输入数字： ```javascript /^[0-9]*$/ ``` 在 Vue 中的实现方式可以在模板中使用 `v-model` 绑定数据，并且通过 `@input` 监听输入框的输入事件，在事件处理函数中使用正则表达式来过滤非数字字符： ```html <template> <div> <input type="text" v-model="inputValue" @input="handleInput"> </div> </template> <script> export default { data() { return { inputValue: '' } }, methods: { handleInput(e) { this.inputValue = e.target.value.replace(/[^0-9]/g, '') } } } </script> ``` 这样就可以让输入框只能输入数字了。