vue中如何去掉空格的方法实现


Posted in Javascript onNovember 09, 2018

一、问题

vue中当用户提交表单时,有的数据需要去掉前后空格然后再向后端发送。

二、解决方法

首先可以使用v-model.trim这个v-model修饰符去解决它,但是当用户输入\u200B时,这个方法就不奏效了,这时我们可以去一下v-model.trim这个修饰符的源码

function genDefaultModel (
 el: ASTElement,
 value: string,
 modifiers: ?ASTModifiers
): ?boolean {
 const type = el.attrsMap.type
 const { lazy, number, trim } = modifiers || {}
 const needCompositionGuard = !lazy && type !== 'range'
 const event = lazy
  ? 'change'
  : type === 'range'
   ? RANGE_TOKEN
   : 'input'

 let valueExpression = '$event.target.value'
  // 去掉空格
 if (trim) {
  valueExpression = `$event.target.value.trim()`
 }
 if (number) {
  valueExpression = `_n(${valueExpression})`
 }

 let code = genAssignmentCode(value, valueExpression)
 if (needCompositionGuard) {
  code = `if($event.target.composing)return;$[code]`
 }

 addProp(el, 'value', `(${value})`)
 addHandler(el, event, code, null, true)
 if (trim || number || type === 'number') {
  addHandler(el, 'blur', '$forceUpdate()')
 }
}

上面的源码处理方式我们也可以理解为下面这种方式:

<input :value="name" @input="if($event.target.composing)return;name=$event.target.value.trim()" type="text"/>

所以我们可以把上面的方法强化或者改进一下:

<template>
 <div @input="removeSpaces">
  <el-input v-model.trim="value"></el-input>
 </div>
</template>
<script>
  export default {
    data() {
      return {
        value : ''
      }
    },
    methods: {
      removeSpaces(event) {
        if(event.target.composing){
          return
      }
      this.value = event.target.value.trim()
      this.value = this.value.replace("\\u200B","")
     }
    }
  }
</script>

同理,使用这种方法我们可以定制一些其他功能的输入框组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
详解iframe与frame的区别
Jan 13 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 #Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 #Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 #Javascript
webpack4.x CommonJS模块化浅析
Nov 09 #Javascript
angular4笔记系列之内置指令小结
Nov 09 #Javascript
node版本管理工具n包使用教程详解
Nov 09 #Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 #Javascript
You might like
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
Json解析的方法小结
2016/06/22 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
python 性能提升的几种方法
2016/07/15 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python实现的桶排序算法示例
2017/11/29 Python
python matplotlib中文显示参数设置解析
2017/12/15 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
如何写一个自定义标签
2012/12/28 面试题
工商管理专业应届生求职信
2013/11/04 职场文书
会计系中文个人求职信
2013/12/24 职场文书
医学生自我评价
2014/01/27 职场文书
财务总经理岗位职责
2014/02/16 职场文书
三好生演讲稿
2014/09/12 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
年底个人总结范文
2015/03/10 职场文书
余世维讲座观后感
2015/06/11 职场文书
五一放假通知怎么写
2015/08/18 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书