当前位置:网站首页>v-model修饰符
v-model修饰符
2022-08-02 03:34:00 【IICOOM】
有一些情况,我们不希望用户输入空格这种无意义的字符,或者其他不合法的字符可以通过下面的方法解决。
禁止输入空格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" />
把输入内容转换为大写。
边栏推荐
猜你喜欢
Application of electronic flow on business trip
使用飞凌嵌入式IMX6UL-C1板子——qt+opencv环境搭建
Process (in): process state, process address space
进程(中):进程状态、进程地址空间
rosdep update失败解决办法(亲测有效)
哈希表解题方法
全加器高进位和低进位的理解
TeamCode 产品 UI 全新升级,快来体验吧
HDMI转MIPI CSI东芝转换芯片-TC358743XBG/TC358749XBG
MPU6050 accelerometer and gyroscope sensor is connected with the Arduino
随机推荐
剑指Offer 31.栈的压入、弹出
倒排单词
剑指Offer 34.二叉树中和为某一值的路径 dfs+回溯
【LeetCode】Add the linked list with carry
bluez5.50蓝牙文件传输
只出现一次的字符
【 LeetCode 】 design list
【Connect the heart rate sensor to Arduino to read the heart rate data】
install 命令
change file extension
判断回文
最长公共子串
联阳IT6561|IT6561FN方案电路|替代IT6561方案设计DP转HDMI音视频转换器资料
模拟电子技术------半导体
最第k大的数的一般性问题
Basic IO (below): soft and hard links and dynamic and static libraries
【LeetCode】链表相加 进位
LL(1)文法 :解决 if-else/if-else 产生式二义性问题
STM32 CAN 介绍以及相关配置
【LeetCode】合并