关于vue.js:vmodel修饰符

有一些状况，咱们不心愿用户输出空格这种无意义的字符，或者其余不非法的字符能够通过上面的办法解决。

禁止输出空格v-model.trim

<el-input v-model="test"></el-input>

<!--增加修饰符-->

<el-input v-model.trim="test"></el-input>

这样空格就无奈输出了。

或者(偶然会有问题)：

<el-input oninput="value=value.replace(/\s/g,'')" v-model="studentModel.name" />

依照这个应用正则替换的思路，还能够实现其余成果，如下：

只能输出数字v-model.number

<el-input v-model.number="studentModel.age" />

<!-- 或者 -->
<el-input oninput="value=value.replace(/\D/g,'')" v-model="studentModel.name" />

如果你用的是element-ui组件，更简单的校验能够放到el-form的validator中，如下：

formRules: {
    name: [
        {required: true, message: '请输出学员姓名'},
        { validator:(rule,val,cb) => {
            val = val.replace(new RegExp(EmojiRanges.join('|'), 'g'), '');
            val = val.trim();
            if (val.includes('+') || val.includes('/') || val.includes('\\')) {
                return cb(new Error('名称中不可蕴含+/\\特殊字符'))
            }
            this.studentModel.name = val;
            return cb();
            }, trigger: 'change' }
    ]
}

v-model 其余修饰符

除了像 .trim 这样的 2.x 硬编码的 v-model 修饰符外，当初 3.x 还反对自定义修饰符：

<ChildComponent v-model.capitalize="pageTitle" />

把输出内容转换为大写。