Vue中change事件是針對(duì)表單元素的,當(dāng)表單元素的值改變時(shí),會(huì)觸發(fā)change事件。相比于input事件,change事件有一個(gè)明顯的特點(diǎn),那就是它必須在表單元素失去焦點(diǎn)才會(huì)觸發(fā)。這也就意味著,如果用戶在輸入新的值后直接提交表單,那么change事件將不會(huì)被觸發(fā)。
下面是在Vue中監(jiān)聽change事件的代碼:
<input v-model="name" @change="handleChange"> ... data() { return { name: '' } }, methods: { handleChange() { console.log('Name changed!') } }
在上面的代碼中,我們使用了v-model指令將input元素和Vue實(shí)例中的name變量進(jìn)行雙向綁定。同時(shí),我們添加了@change事件監(jiān)聽器來監(jiān)聽name變量的改變。當(dāng)用戶在input元素中輸入新的值并且失去焦點(diǎn)時(shí),handleChange方法將會(huì)被觸發(fā),從而輸出一條提示信息到控制臺(tái)。
需要注意的是,change事件只適用于某些表單元素,如<input>、<select>和<textarea>。對(duì)于其他的元素,如<div>或<span>,則沒有change事件可供監(jiān)聽。