Vue.js方法

Vue方法是與Vue實例關聯的函數。方法在內部定義`methods`財產。讓我們看看它們是如何工作的。

什麼是Vue.js方法

Vue方法是與Vue實例關聯的函數。

方法在內部定義methods財產：

new Vue({
  methods: {
    handleClick: function() {
      alert('test')
    }
  }
})

或在“單個文件組件”的情況下：

<script>
export default {
  methods: {
    handleClick: function() {
      alert('test')
    }
  }
}
</script>

當您需要執行某項操作並附加一個v-on要處理的元素上的指令大事記。像這樣，handleClick單擊元素時：

<template>
  <a @click="handleClick">Click me!</a>
</template>

將參數傳遞給Vue.js方法

方法可以接受參數。

在這種情況下，您只需在模板中傳遞參數，然後

<template>
  <a @click="handleClick('something')">Click me!</a>
</template>

new Vue({
  methods: {
    handleClick: function(text) {
      alert(text)
    }
  }
})

或在“單個文件組件”的情況下：

<script>
export default {
  methods: {
    handleClick: function(text) {
      alert(text)
    }
  }
}
</script>

如何從方法訪問數據

您可以使用來訪問Vue組件的任何數據屬性。this.propertyName：

<template>
  <a @click="handleClick()">Click me!</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會引發錯誤。

如您之前在事件描述中所看到的，方法與事件緊密關聯，因為它們被用作事件處理程序。每次事件發生時，都會調用該方法。

免費下載我的Vue手冊

Vue.js方法

Vue方法是與Vue實例關聯的函數。方法在內部定義methods財產。讓我們看看它們是如何工作的。

什麼是Vue.js方法

將參數傳遞給Vue.js方法

如何從方法訪問數據

更多vue教程：

Vue方法是與Vue實例關聯的函數。方法在內部定義`methods`財產。讓我們看看它們是如何工作的。