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

 更新时间:2018年11月09日 10:38:28   作者:Pjee  
这篇文章主要介绍了vue中如何去掉空格的方法实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一、问题

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>

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

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

相关文章

  • Element树形控件el-tree实现一键全选、反选功能

    Element树形控件el-tree实现一键全选、反选功能

    最近做的项目用到了全选全不选功能,于是就自己动手写了一个,这篇文章主要给大家介绍了关于Element树形控件el-tree实现一键全选、反选功能的相关资料,需要的朋友可以参考下
    2023-10-10
  • vue3数据可视化实现数字滚动特效代码

    vue3数据可视化实现数字滚动特效代码

    这篇文章主要介绍了vue3数据可视化实现数字滚动特效,实现思路是使用Vue.component定义公共组件,使用window.requestAnimationFrame(首选,次选setTimeout)来循环数字动画,详细代码跟随小编一起看看吧
    2022-09-09
  • vue插件实现v-model功能

    vue插件实现v-model功能

    最近在开发自己的富文本编辑器插件,在开发中遇到了很多问题其中我觉得比较好的问题就是在你定义的插件中实现双向绑定。这篇文章主要介绍了vue插件实现v-model功能,需要的朋友可以参考下
    2018-09-09
  • 浅谈vue-router2路由参数注意的问题

    浅谈vue-router2路由参数注意的问题

    下面小编就为大家带来一篇浅谈vue-router2路由参数注意的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue引入iconfont图标库的优雅实战记录

    vue引入iconfont图标库的优雅实战记录

    使用组件库时,图标往往不能满足需求,所以我们常常需要用到第三方图标库,这篇文章主要给大家介绍了关于vue引入iconfont的相关资料,需要的朋友可以参考下
    2021-06-06
  • vue+element实现页面顶部tag思路详解

    vue+element实现页面顶部tag思路详解

    这篇文章主要介绍了vue+element实现页面顶部tag效果,页面显示由数组循环得出,数组可存储在store里,tags数组里面已经有值,由于默认是白色,所以页面上看不出,接下来就是给选中的标签高亮,需要的朋友可以参考下
    2021-12-12
  • 如何解决Vue请求接口出现跨域问题Access-Control-Allow-Origin

    如何解决Vue请求接口出现跨域问题Access-Control-Allow-Origin

    这篇文章主要介绍了如何解决Vue请求接口出现跨域问题Access-Control-Allow-Origin,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue使用Font Awesome的方法步骤

    vue使用Font Awesome的方法步骤

    这篇文章主要介绍了vue使用Font Awesome的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • VUE使用day.js显示时分秒并实时更新时间效果实例

    VUE使用day.js显示时分秒并实时更新时间效果实例

    vue.js是目前比较流行的前端框架之一,它提供了非常多的基础组件和工具库,以方便开发者快速搭建具有可重用性的web应用,下面这篇文章主要给大家介绍了关于VUE使用day.js显示时分秒并实时更新时间效果的相关资料,需要的朋友可以参考下
    2024-04-04
  • 如何巧用Vue缓存函数浅析

    如何巧用Vue缓存函数浅析

    有时候不希望已经请求过的数据,再次请求重复执行刷新操作,我们就需要使用数据缓存,这篇文章主要给大家介绍了关于如何巧用Vue缓存函数的相关资料,需要的朋友可以参考下
    2021-09-09

最新评论