網頁開發中，input 元素是指用戶可以在這個元素中輸入文本的區域。在 Vue 中，我們可以使用 v-model 指令綁定 input 元素的值，當用戶在 input 元素中輸入文本時，這個值會自動更新。

然而，當用戶在 input 元素中敲入空格時，value 會將這個空格作為有效字符賦值給 v-model，這時候我們需要一種方法去除這些空格。

// method 1：通過自定義指令實現輸入文本時自動去除空格
Vue.directive('trim', {
bind: function (el, binding, vnode) {
function trimValue () {
let trimmedValue = el.value.trim()
if (trimmedValue !== el.value) {
el.value = trimmedValue
el.dispatchEvent(new Event('input'))
}
}
el.addEventListener('blur', trimValue)
el.addEventListener('input', trimValue)
},
unbind: function (el) {
el.removeEventListener('blur', el._trimValue)
el.removeEventListener('input', el._trimValue)
delete el._trimValue
}
})

在上面的代碼中，我們通過 Vue.directive() 方法自定義了一個名為 trim 的指令。在 bind 鉤子中，我們給元素綁定了一個 blur 事件和一個 input 事件，當輸入元素失去焦點或者輸入發生變化時，我們會調用 trimValue 函數來去除空格。

trimValue 函數先進行字符串去空格操作，然后判斷去空格后的字符串和原始字符串是否一致，如果不一致就更新 input 的值，并使用 dispatchEvent 方法觸發一個 input 事件，這能夠確保綁定了 v-model 的變量同步更新。

在 unbind 鉤子中，我們解綁了 blur 和 input 事件，因為在這些事件觸發之前，這個自定義指令已經不再需要使用了。

// method 2：使用 computed 屬性去除空格

在第二個方法中，我們使用了 Vue 中常用的 computed 屬性。我們將 input 元素輸入的字符串通過 v-model 綁定到了 this.text 這個變量上面，然后通過 computed 屬性定義了一個名為 trimmedText 的計算屬性。

在這個計算屬性中，我們對 this.text 進行了去空格處理（即調用 trim() 方法），然后返回處理后的結果。因為 computed 屬性可以直接綁定到模板中，所以我們可以直接在模板中顯示 trimmedText，這樣就能夠在顯示時去除空格。

這兩種方法的實現方式不同，但都可以有效地去除輸入框中輸入的空格。可以根據需要選擇適合自己的方法。