vue中如何去掉空格的方法實現(xiàn)
更新時間：2018年11月09日 10:38:28 作者：Pjee
這篇文章主要介紹了vue中如何去掉空格的方法實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一、問題
vue中當用戶提交表單時，有的數(shù)據(jù)需要去掉前后空格然后再向后端發(fā)送。
二、解決方法
首先可以使用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>
同理，使用這種方法我們可以定制一些其他功能的輸入框組件
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Element樹形控件el-tree實現(xiàn)一鍵全選、反選功能
最近做的項目用到了全選全不選功能,于是就自己動手寫了一個,這篇文章主要給大家介紹了關于Element樹形控件el-tree實現(xiàn)一鍵全選、反選功能的相關資料,需要的朋友可以參考下2023-10-10
vue3數(shù)據(jù)可視化實現(xiàn)數(shù)字滾動特效代碼
這篇文章主要介紹了vue3數(shù)據(jù)可視化實現(xiàn)數(shù)字滾動特效,實現(xiàn)思路是使用Vue.component定義公共組件，使用window.requestAnimationFrame（首選，次選setTimeout）來循環(huán)數(shù)字動畫，詳細代碼跟隨小編一起看看吧2022-09-09
最近在開發(fā)自己的富文本編輯器插件，在開發(fā)中遇到了很多問題其中我覺得比較好的問題就是在你定義的插件中實現(xiàn)雙向綁定。這篇文章主要介紹了vue插件實現(xiàn)v-model功能,需要的朋友可以參考下2018-09-09
下面小編就為大家?guī)硪黄獪\談vue-router2路由參數(shù)注意的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue引入iconfont圖標庫的優(yōu)雅實戰(zhàn)記錄
使用組件庫時,圖標往往不能滿足需求,所以我們常常需要用到第三方圖標庫,這篇文章主要給大家介紹了關于vue引入iconfont的相關資料,需要的朋友可以參考下2021-06-06
vue+element實現(xiàn)頁面頂部tag思路詳解
這篇文章主要介紹了vue+element實現(xiàn)頁面頂部tag效果,頁面顯示由數(shù)組循環(huán)得出，數(shù)組可存儲在store里，tags數(shù)組里面已經(jīng)有值，由于默認是白色，所以頁面上看不出，接下來就是給選中的標簽高亮，需要的朋友可以參考下2021-12-12
如何解決Vue請求接口出現(xiàn)跨域問題Access-Control-Allow-Origin
這篇文章主要介紹了如何解決Vue請求接口出現(xiàn)跨域問題Access-Control-Allow-Origin,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue使用Font Awesome的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
vue.js是目前比較流行的前端框架之一,它提供了非常多的基礎組件和工具庫,以方便開發(fā)者快速搭建具有可重用性的web應用,下面這篇文章主要給大家介紹了關于VUE使用day.js顯示時分秒并實時更新時間效果的相關資料,需要的朋友可以參考下2024-04-04
有時候不希望已經(jīng)請求過的數(shù)據(jù),再次請求重復執(zhí)行刷新操作,我們就需要使用數(shù)據(jù)緩存,這篇文章主要給大家介紹了關于如何巧用Vue緩存函數(shù)的相關資料,需要的朋友可以參考下2021-09-09