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教程: