當(dāng)我們?cè)赩ue中使用v-model指令綁定數(shù)據(jù)時(shí)，常常會(huì)遇到需要清空輸入框或表單的情況。Vue提供了多種方法實(shí)現(xiàn)清空，下面將逐一介紹。

清空

一種直接的方法是在清空按鈕的點(diǎn)擊事件中將綁定數(shù)據(jù)賦為空字符串。以上代碼將清空綁定到message上的輸入框內(nèi)容。如果需要清空多個(gè)數(shù)據(jù)，需要逐一在點(diǎn)擊事件中進(jìn)行操作。

重置

如果數(shù)據(jù)較多，可以將重置操作封裝為一個(gè)方法，一次性清空多個(gè)數(shù)據(jù)，如以上代碼中reset方法：

methods: {
reset() {
this.message = ''
this.otherData = null
// ...
}
}

此外，可以使用Vue提供的watch選項(xiàng)來監(jiān)聽數(shù)據(jù)變化，實(shí)現(xiàn)清空如下：

清空// 組件選項(xiàng)中
watch: {
message(newVal) {
if (!newVal) {
this.clear()
}
}
},
methods: {
clear() {
this.message = ''
}
}

以上代碼將watch選項(xiàng)綁定到message上，當(dāng)message數(shù)據(jù)變化時(shí)，如果數(shù)據(jù)為空（null或undefined），則調(diào)用clear方法清空數(shù)據(jù)。

清空// 模板中

如果需要清空某個(gè)輸入框中的內(nèi)容，可以使用ref標(biāo)記，在按鈕的點(diǎn)擊事件中通過$refs獲取對(duì)應(yīng)的DOM元素并清空其值，如以上代碼中清空綁定到message上的輸入框內(nèi)容。

通過以上方法，我們可以方便地實(shí)現(xiàn)Vue中v-model數(shù)據(jù)的清空，提升用戶體驗(yàn)。