element-UI和Vue的输入框怎么去除前后端的空格键

最新推荐文章于 2024-12-23 16:31:08 发布

Alive_tree

最新推荐文章于 2024-12-23 16:31:08 发布

阅读量3.4k

点赞数 1

本文链接：https://blog.csdn.net/Alive_tree/article/details/108832217

版权

本文介绍如何在使用Element UI的Vue项目中，解决用户输入空格导致搜索功能异常的问题。通过添加v-model.trim修饰符，可以轻松实现对输入内容两端空格的去除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用elementUI 写输入框的时候，比如搜索输入框
在这里插入图片描述
如果用户在输入框中不小心在末尾点了一下空格键，但是他又看不到空格键，这样传到后台的数据就是带空格键的数据，根据查询条件，带空格的关键字搜索不到内容，怎么去掉空格键，很简单，使用vue修饰符就可以了。
代码如下：

  <div class="tool-right">
          <el-input class="search-input" 
          v-model.trim="searchKey"   //去掉输入内容两端的空格键
          placeholder="请输入产品型号名称" clearable 
          prefix-icon="el-icon-search">
          </el-input>
          <el-button type="info" @click="search">查询</el-button>
</div>