vue中的設(shè)計(jì)是基于組件的，它的input組件提供了一個(gè)clearable屬性用來允許用戶清空輸入框中的內(nèi)容。當(dāng)然，我們也可以通過JavaScript來清空一個(gè)input的value值。

想要清空一個(gè)input的value值，我們可以通過$refs直接獲取input元素，然后再進(jìn)行改變value的操作。比如：

<template>
<input type="text" ref="myInput"/>
<button @click="clearInput">Clear Input</button>
</template>
<script>
export default {
methods: {
clearInput () {
this.$refs.myInput.value = '';
}
}
};
</script>

這樣就可以通過點(diǎn)擊“Clear Input”按鈕來清空input框中的內(nèi)容了。

當(dāng)然，如果想要使用vue自帶的clearable屬性來實(shí)現(xiàn)同樣的效果，也是非常簡單的。只需要在input組件中添加clearable屬性即可：

<template>
<input type="text" v-model="myData" clearable/>
</template>
<script>
export default {
data () {
return {
myData: ''
}
}
};
</script>

這樣在input框右側(cè)就會(huì)出現(xiàn)一個(gè)“X”按鈕，點(diǎn)擊即可清空input中的內(nèi)容。