Vue自定義指令是控制、維護(hù)DOM的重要方式，通過(guò)自定義指令，Vue允許您在渲染過(guò)程中以 JavaScript 的方式更新 DOM。對(duì)于表單控件之類(lèi)的元素，我們需要監(jiān)聽(tīng)它們的事件，如 SELECT 的 CHANGE 事件。在 Vue 中，可以通過(guò) v-on 或 @ 符號(hào)來(lái)監(jiān)聽(tīng) SELECT 的 CHANGE 事件。

<select v-model="selected" v-on:change="handleChange">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>

在上述代碼中，我們使用 v-model 綁定 SELECT，以便從組件中獲取當(dāng)前選擇的選項(xiàng)。我們還創(chuàng)建了一個(gè) handleChange 事件處理程序來(lái)處理當(dāng) SELECT 發(fā)生 CHANGE 事件時(shí)所需執(zhí)行的操作。

export default {
data() {
return {
selected: null,
options: [
{ text: '選項(xiàng)1', value: 'option1' },
{ text: '選項(xiàng)2', value: 'option2' },
{ text: '選項(xiàng)3', value: 'option3' }
]
}
},
methods: {
handleChange(event) {
console.log('選擇的選項(xiàng)值為:', event.target.value)
}
}
}

上述代碼中的 handleChange 方法將選擇的選項(xiàng)值記錄在控制臺(tái)中，但是您可以自行修改以實(shí)現(xiàn)所需的操作，例如向服務(wù)器提交該值或?qū)⑵溆糜诹硪粋€(gè)組件。

此外，您還可以使用修飾符 v-model:lazy 和 v-model:debounce。使用 lazy 修飾符可改為在 CHANGE 事件之后才同步 SELECT 值，而使用 debounce 修飾符可在不間斷地接收用戶(hù)輸入時(shí)減少表單的頻繁更新。

<select v-model:lazy="selected">...</select>
<select v-model:debounce.500ms="selected">...</select>

希望您使用 Vue SELECT 事件監(jiān)聽(tīng)事件時(shí)，上述內(nèi)容能給您帶來(lái)幫助。