/

Vue.js 方法

Vue.js 方法

Vue 方法是與 Vue 實例相關聯的函數。方法定義在 methods 屬性中。讓我們看一下它們是如何工作的。

什麼是 Vue.js 方法

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

方法定義在 methods 屬性中：

1
2
3
4
5
6
7
new Vue({
  methods: {
    handleClick: function() {
      alert('測試')
    }
  }
})

在單文件組件的情況下：

1
2
3
4
5
6
7
8
9
<script>
export default {
  methods: {
    handleClick: function() {
      alert('測試')
    }
  }
}
</script>

在需要執行動作並且將 v-on 指令附加到元素來處理事件時，方法尤其有用。例如，以下代碼在元素被點擊時調用 handleClick 方法：

1
2
3
<template>
  <a @click="handleClick">點我！</a>
</template>

將參數傳遞給 Vue.js 方法

方法可以接受參數。

在這種情況下，您只需要在模板中傳遞參數，然後在方法內部使用它：

1
2
3
<template>
  <a @click="handleClick('something')">點我！</a>
</template>
1
2
3
4
5
6
7
new Vue({
  methods: {
    handleClick: function(text) {
      alert(text)
    }
  }
})

在單文件組件的情況下：

1
2
3
4
5
6
7
8
9
<script>
export default {
  methods: {
    handleClick: function(text) {
      alert(text)
    }
  }
}
</script>

如何從方法中訪問數據

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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 會引發錯誤。

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

tags: [“Vue.js”, “methods”, “event handling”]