在使用Vue開(kāi)發(fā)的前端項(xiàng)目中，經(jīng)常會(huì)遇到需要清空select中已選中的數(shù)據(jù)的場(chǎng)景。這個(gè)時(shí)候，我們可以通過(guò)Vue提供的一些方法來(lái)實(shí)現(xiàn)。

首先，我們可以通過(guò)v-model來(lái)綁定Select的值。v-model會(huì)自動(dòng)監(jiān)聽(tīng)Select的值變化，并將值保存在綁定的data中。

<template>
<select v-model="selected">
<option v-for="option in options" :value="option">{{ option }}</option>
</select>
<button @click="clearSelected">Clear</button>
</template>
<script>
export default {
data() {
return {
selected: '',
options: ['Option 1', 'Option 2', 'Option 3']
};
},
methods: {
clearSelected() {
this.selected = '';
}
}
};
</script>

通過(guò)上述代碼，我們可以看到，我們?cè)赩ue組件中綁定了一個(gè)select組件以及一個(gè)Clear按鈕。當(dāng)select選項(xiàng)變化時(shí)，selected的值也會(huì)跟著變化。當(dāng)我們點(diǎn)擊Clear按鈕時(shí)，會(huì)調(diào)用clearSelected方法，將selected的值設(shè)為空字符串，從而實(shí)現(xiàn)清空已選中的數(shù)據(jù)。

除了通過(guò)v-model來(lái)綁定select組件的值以外，我們還可以通過(guò)ref來(lái)訪問(wèn)select組件的實(shí)例，從而對(duì)其進(jìn)行操作。

<template>
<select ref="select">
<option v-for="option in options" :value="option">{{ option }}</option>
</select>
<button @click="clearSelected">Clear</button>
</template>
<script>
export default {
data() {
return {
options: ['Option 1', 'Option 2', 'Option 3']
};
},
methods: {
clearSelected() {
this.$refs.select.selectedIndex = -1;
}
}
};
</script>

通過(guò)上述代碼，我們可以看到，我們?cè)赩ue組件中綁定了一個(gè)select組件以及一個(gè)Clear按鈕。通過(guò)ref來(lái)獲取select組件的實(shí)例時(shí)，我們可以使用this.$refs.select。當(dāng)我們點(diǎn)擊Clear按鈕時(shí)，會(huì)調(diào)用clearSelected方法，將select的selectedIndex屬性設(shè)為-1，從而實(shí)現(xiàn)清空已選中的數(shù)據(jù)。

綜上所述，通過(guò)v-model和ref這兩種方法，我們都可以很方便地實(shí)現(xiàn)Vue select清空數(shù)據(jù)這一功能。