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 相关文章推荐
用javascript控制iframe滚动的代码
Apr 10 Javascript
用jscript实现列出安装的软件列表
Jun 18 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
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
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
react实现antd线上主题动态切换功能
2019/08/12 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
Python安装selenium包详细过程
2019/07/23 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
美国购物网站:Clickhere2shop
2021/01/28 全球购物
介绍一下gcc特性
2012/01/20 面试题
土木工程毕业生自荐信
2013/09/21 职场文书
岗位职责定义及内容
2013/11/08 职场文书
电台实习生求职信
2014/02/25 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
大学生见习报告总结
2014/11/04 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS