Vue 的事件綁定是一個非常方便且重要的功能,它可以使我們將 DOM 與 Vue 實例的方法相連,讓我們可以在事件觸發時響應應用的行為。Vue 提供了一種 v-on 指令用于綁定事件處理函數,如下所示。
在這個例子中,我們給按鈕綁定了一個點擊事件。v-on 后面的參數是事件名,這里是 click。我們將處理函數 doSomething 綁定到這個事件上,在按鈕被點擊時調用這個函數。
使用 v-on 綁定的事件處理函數都可以接受一個 event 對象作為參數。這個對象包含了事件觸發時的所有信息,例如事件的類型、目標元素、按下的鍵等等。
methods: {
doSomething: function (event) {
console.log(event.target.tagName)
}
}
在這個例子中,我們使用 event.target 輸出了觸發事件的元素標簽名。
除了 click 事件,Vue 還支持一整套的 DOM 事件,例如 mouseover、keyup、submit 等等。我們在 v-on 中傳遞的參數也可以是一個表達式,只需要使用 Vue 實例上對應的方法名稱即可。
在這個例子中,我們使用了鍵盤事件的 keyup,限制了觸發事件時按下的鍵為 enter。這樣,在用戶按下回車鍵時,會調用 Vue 實例上的 submit 方法。
總之,在 Vue 中,我們可以非常方便地綁定事件處理函數,響應用戶的操作,并實時更新應用的狀態。
上一篇python 泛洪填充
下一篇python 簡易計算器