vue如何监听多个input框_Vue中实现输入框Input输入限制

在开发过程中，基本都遇到过需要限制输入的情况，比如金额、仅字母数字、可输入小数位等，网上搜了很多方法也遇到一些坑，所以分享出来。震惊：阿里腾讯一线大厂前端面试学习经验，最完整面试真题分享！_前端交流群:954854084-CSDN博客​blog.csdn.net

1.使用修饰符实现数字输入

在VUE中可以在v-modal后添加修饰符的形式来限制输入，比如：

.number可以实现限制数字输入，但是会有以下问题：会出现type="number"自带样式，当然可以通过添加以下css清除

/* 普通IE浏览器 样式清除 */

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{

-webkit-appearance: none !important;

}

/* 火狐浏览器样式清除 */

input[type="number"]{

-moz-appearance:textfield;

}可以无限输入特殊符号+-.，会导致清空data中的值testValue 这里的修饰符也无法实现定制限制输入，不能满足要求

2.监听输入框变化

通过@input监听更新数据，实现只能输入数字，而且可以自行定制限制输入内容

此方法可以满足需求，但是无法封装进行批量使用

3.封装全局指令

封装input限制输入指令

//input.js

<