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