vue之去除输入元素前后两端空格

WCF向光而行

已于 2023-06-28 10:38:59 修改

阅读量3k

点赞数 1

分类专栏：前端-vue 前端文章标签： vue.js javascript

于 2023-06-28 10:37:34 首次发布

本文链接：https://blog.csdn.net/weixin_45434371/article/details/131431530

版权

3 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

文章介绍了在Vue.js前端框架下处理查询列表时遇到的问题，即用户从其他地方粘贴的查询条件值带有前后空格。提出了两种解决方案：一是为每个输入框添加change事件，使用trim()方法去除空格；二是直接在v-model后使用.trim修饰符来自动处理空格问题。第二种方案更为简洁高效。

摘要由CSDN通过智能技术生成

需求描述

现有一个查询列表功能，需根据某个条件进行查询，这个查询条件的值是从其它的地方粘贴的，粘贴之后的效果如下：
在这里插入图片描述
可以看到粘贴的仓库区域名称前面出现了空格，所以要解决的问题是去除前后两端的空格。

给每个输入元素框添加一个改变事件，首先拿到这个收入元素框中的值，然后调用trim()方法去除两端空格后，重新赋值给这个表单元素，实现代码如下：

<a-input placeholder="请输入物料编码" v-model="model.invmbCode" @change="clearInputInvmbCodeTrim"></a-input>

clearInputInvmbCodeTrim(){
  this.model.invmbCode = this.model.invmbCode.trim();
}

温馨提示：这里使用的前端框架是vue，其次不足是需要为每个表单元素都添加一个改变事件。

这种方式是在vue中去除表单元素前后两端空格，在v-model后面添加.trim，实现代码如下：

<a-input placeholder="请输入物料编码" v-model.trim="model.invmbCode"></a-input>

关注

专栏目录