建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網營銷解決方案
vue中如何去掉空格的方法實現(xiàn)
一、問題
目前創(chuàng)新互聯(lián)已為上1000家的企業(yè)提供了網站建設、域名、虛擬空間、成都網站托管、企業(yè)網站設計、響水網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
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()')
}
}
上面的源碼處理方式我們也可以理解為下面這種方式：
復制代碼 代碼如下:
所以我們可以把上面的方法強化或者改進一下：
同理，使用這種方法我們可以定制一些其他功能的輸入框組件
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
本文題目：vue中如何去掉空格的方法實現(xiàn)
標題來源：http://fisionsoft.com.cn/article/pigdhg.html
