vue中如何去掉空格的方法實(shí)現(xiàn)

更新時(shí)間：2018年11月09日 10:38:28 作者：Pjee

這篇文章主要介紹了vue中如何去掉空格的方法實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

一、問(wèn)題

vue中當(dāng)用戶提交表單時(shí)，有的數(shù)據(jù)需要去掉前后空格然后再向后端發(fā)送。

二、解決方法

首先可以使用v-model.trim這個(gè)v-model修飾符去解決它，但是當(dāng)用戶輸入\u200B時(shí)，這個(gè)方法就不奏效了，這時(shí)我們可以去一下v-model.trim這個(gè)修飾符的源碼

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()')
 }
}

上面的源碼處理方式我們也可以理解為下面這種方式：

復(fù)制代碼代碼如下:

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

所以我們可以把上面的方法強(qiáng)化或者改進(jìn)一下：

<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>

同理，使用這種方法我們可以定制一些其他功能的輸入框組件

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue的toast彈窗組件實(shí)例詳解
本文通過(guò)實(shí)例給大家講解了vue的toast彈窗組件功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-05-05
關(guān)閉eslint檢查和ts檢查的簡(jiǎn)單步驟記錄
這篇文章主要給大家介紹了關(guān)于關(guān)閉eslint檢查和ts檢查的相關(guān)資料,eslint是一個(gè)JavaScript的校驗(yàn)插件,通常用來(lái)校驗(yàn)語(yǔ)法或代碼的書寫風(fēng)格,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-02-02
vue3.0中使用element UI表單遍歷校驗(yàn)問(wèn)題解決
本文主要介紹了vue3.0中使用element UI表單遍歷校驗(yàn)問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
Vue3.0之引入Element-plus ui樣式的兩種方法
本文主要介紹了Vue3.0之引入Element-plus ui樣式的兩種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
Vue3中創(chuàng)建異步組件的流程步驟
在現(xiàn)代前端開(kāi)發(fā)中,組件的重用性和異步加載是提升用戶體驗(yàn)和優(yōu)化性能的關(guān)鍵因素,在Vue 3中,創(chuàng)建異步組件變得更為便利,本文將探討如何在Vue 3中使用setup語(yǔ)法糖來(lái)創(chuàng)建異步組件,感興趣的小伙伴跟著小編一起來(lái)看看吧
2024-09-09
Vue 3.0 全家桶搶先體驗(yàn)
這篇文章主要介紹了Vue 3.0 全家桶搶先體驗(yàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
vue3實(shí)現(xiàn)無(wú)縫滾動(dòng)列表效果(大屏數(shù)據(jù)輪播場(chǎng)景)
vue3-scroll-seamless 是一個(gè)用于 Vue 3 的插件,用于實(shí)現(xiàn)無(wú)縫滾動(dòng)的組件,它可以讓內(nèi)容在水平或垂直方向上無(wú)縫滾動(dòng),適用于展示輪播圖、新聞滾動(dòng)、圖片展示等場(chǎng)景,本文就給大家介紹了vue3實(shí)現(xiàn)無(wú)縫滾動(dòng)列表效果,需要的朋友可以參考下
2024-07-07
element表單校驗(yàn)提示定位到元素位置
本文主要介紹了element表單校驗(yàn)提示定位到元素位置，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
Vue實(shí)現(xiàn)可移動(dòng)水平時(shí)間軸
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)可移動(dòng)水平時(shí)間軸，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
Vue.Draggable實(shí)現(xiàn)拖拽效果
這篇文章主要介紹了Vue.Draggable實(shí)現(xiàn)拖拽效果，使用簡(jiǎn)單方便，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06