在Vue中操作DOM是很常見的一個(gè)需求，而有時(shí)候會(huì)出現(xiàn)需要清空原有內(nèi)容的情況。比如，在數(shù)字輸入框中輸入一個(gè)新的數(shù)字時(shí)，原有數(shù)字需要清空。Vue提供了多種方法清空原有內(nèi)容。

// 在模板中使用v-model指令實(shí)現(xiàn)// 在組件中使用ref獲取DOM元素對象并修改value值// 在Vue實(shí)例中通過$refs獲取DOM元素對象并修改value值

第一種方法是使用v-model指令。v-model指令是Vue提供的雙向數(shù)據(jù)綁定指令，用于在表單元素和Vue實(shí)例數(shù)據(jù)之間建立雙向綁定關(guān)系。當(dāng)用戶修改表單元素的值時(shí)，數(shù)據(jù)會(huì)實(shí)時(shí)更新到Vue實(shí)例中。如果將v-model綁定到一個(gè)空字符串或undefined的變量上，那么當(dāng)用戶修改表單元素的值時(shí)，原有內(nèi)容會(huì)自動(dòng)清除。

第二種方法是通過組件使用ref獲取DOM元素對象并修改value值。在組件中可以通過ref指定一個(gè)引用標(biāo)識(shí)，然后在組件實(shí)例中通過this.$refs獲取該DOM元素對象。這種方法需要手動(dòng)添加Clear按鈕，并在按鈕的點(diǎn)擊事件中通過this.$refs.input.value=''修改value值。

第三種方法是在Vue實(shí)例中通過$refs獲取DOM元素對象并修改value值。這種方法與第二種方法類似，只是在Vue實(shí)例中實(shí)現(xiàn)，不需要定義組件。在Vue實(shí)例的mounted函數(shù)中可以通過this.$refs獲取DOM元素對象，然后在mounted函數(shù)中將value設(shè)置為''。在Clear按鈕的點(diǎn)擊事件中同樣可以通過this.$refs.input.value=''修改value值。