Vue.js 在事件處理上,主要是透過 v-on 去監聽事件,事件觸發後可以指定對應的動作。
像是點擊後用運算式處理對應的動作。
Vue - Hello World
Click
{{click}}
new Vue({
el: '#app',
data:{
click: 0
}
})
或是調用對應的方法處理。
Vue - Hello World
Click
{{click}}
new Vue({
el: '#app',
data:{
click: 0
},
methods: {
onClick: function(event){
this.click += 1
}
}
})
若有需要,在方法調用時也可以附帶參數進去調用。
Vue - Hello World
Click
{{click}}
new Vue({
el: '#app',
data:{
click: 0
},
methods: {
onClick: function(value){
this.click += value
}
}
})
需要 DOM event 做些處理的話,也可以透過 $event 將 DOM event 傳入對應的方法內使用。
Vue - Hello World
Click
{{click}}
new Vue({
el: '#app',
data:{
click: 0
},
methods: {
onClick: function(value, event){
if (event) event.preventDefault()
this.click += value
}
}
})