Vue 方法是與 Vue 實例相關聯的函數。方法定義在 methods
屬性中。讓我們看一下它們是如何工作的。
什麼是 Vue.js 方法
Vue 方法是與 Vue 實例相關聯的函數。
方法定義在 methods
屬性中:
new Vue({
methods: {
handleClick: function() {
alert('測試')
}
}
})
在單文件組件的情況下:
<script>
export default {
methods: {
handleClick: function() {
alert('測試')
}
}
}
</script>
在需要執行動作並且將 v-on
指令附加到元素來處理事件時,方法尤其有用。例如,以下代碼在元素被點擊時調用 handleClick
方法:
<template>
<a @click="handleClick">點我!</a>
</template>
將參數傳遞給 Vue.js 方法
方法可以接受參數。
在這種情況下,您只需要在模板中傳遞參數,然後在方法內部使用它:
<template>
<a @click="handleClick('something')">點我!</a>
</template>
new Vue({
methods: {
handleClick: function(text) {
alert(text)
}
}
})
在單文件組件的情況下:
<script>
export default {
methods: {
handleClick: function(text) {
alert(text)
}
}
}
</script>
如何從方法中訪問數據
您可以通過使用 this.propertyName
來訪問 Vue 組件的任何數據屬性:
<template>
<a @click="handleClick">點我!</a>
</template>
<script>
export default {
data() {
return {
name: 'Flavio'
}
},
methods: {
handleClick: function() {
console.log(this.name)
}
}
}
</script>
我們不需要使用 this.data.name
,只需要使用 this.name
。Vue 為我們提供了透明的綁定。使用 this.data.name
會引發錯誤。
正如您之前在事件描述中看到的,方法與事件密切相關,因為它們被用作事件處理程序。每當發生事件時,該方法都會被調用。