组件用.vue还是.js_Vue2.0组件使用RegExp来限制用户的输入-CSDN博客

组件用.vue还是.js

Vue模式输入 (vue-pattern-input)

Works like native input element, you can add maxlength class attributes. You can use v-model too.

就像本机输入元素一样，您可以添加maxlength类属性。您也可以使用v模型。

包含什么 (What's included)

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

在下载文件中，您将找到以下目录和文件，对常用资产进行逻辑分组，并提供已编译和最小化的变体。您会看到以下内容：

vue-pattern-input/
├── ...
├── src/
│   └── /component
│       └── pattern-input.vue // core
└── /view
    └── demo.html

参数声明 (Parameter declaration)

Parameter	Type	Default	Required	Description
regExp	RegExp	null	false	Using for: String.prototype.replace(regexp, replacement)
replacement	String	''	false	Using for: String.prototype.replace(regexp, replacement)
v-model[.number]	String/Number		true	Using for getting input value

参数	类型	默认	需要	描述
regExp	正则表达式	空值	假	用于：String.prototype.replace(正则表达式，替换)
替代	串	''	假	用于：String.prototype.replace(正则表达式，替换)
v模型[.number]	字符串/数字		真正	用于获取输入值

常用的regExp (Commonly used regExp)

regExp	Description
/^[1]\|\D/g	positive integer
/[^a-z]/g	lowercase
/[^A-Z]/g	uppercase
/[^\w]/g	\w, Equivalent to [A-Za-z0-9_]
/[^\u4e00-\u9fa5]/g	Chinese

regExp	描述
/ ^[1] * \| \ D * / g	正整数
/ [^ az] / g	小写
/ [^ AZ] / g	大写
/ [^ \ w] / g	\ w，相当于[A-Za-z0-9_]
/ [^ \ u4e00- \ u9fa5] / g	中文

快速开始 (Quick start)

JavaScript (JavaScript)

setting: {
  regExp: /^[0\D]*|\D*/g, // Match any character that doesn't belong to the positive integer
  replacement: '',
  val: '223'
}

HTML (HTML)

<pattern-input class="your-class-name"
               :regExp="setting.regExp"
               :replacement="setting.replacement"
               @input="handleInput"
               @change="handleChange"
               v-model.number="setting.val"></pattern-input>