How to call functions in vue

Function call method in Vue: Data method: Called through this object of the instance, defined in the methods option. Event handler function: binds to HTML events through the v-on directive, and is automatically called when the event is triggered.

Methods of calling functions in Vue

In Vue, there are two main ways to call functions:

1. Data method

The data method is defined on the Vue instance through methods option and can be called through this object in the instance.

 <code class="js">new Vue({ data() { return { message: 'Hello, world!' } }, methods: { sayHello() { console.log(this.message) } } }) // 调用数据方法this.sayHello() // 输出: Hello, world!</code>

2. Event handling function

The event handler is bound to an HTML event through v-on directive and is automatically called when the event is triggered.

 <code class="html"><button v-on:click="greet">Greet</button></code>

 <code class="js">new Vue({ methods: { greet() { console.log('Hello from the button!') } } }) // 点击按钮后执行greet 函数</code>

Function parameters

Functions in Vue can accept parameters, and parameters are passed through parentheses after the function name.

 <code class="js">new Vue({ data() { return { name: 'John' } }, methods: { greet(name) { console.log(`Hello, ${name}!`) } } }) // 调用greet 函数并传递参数this.greet('Jane') // 输出: Hello, Jane!</code>

Return data

Functions in Vue can return data.

 <code class="js">new Vue({ methods: { calculateAge() { return 2023 - this.birthDate } } }) // 调用calculateAge 函数并获取返回值const age = this.calculateAge() // age 为当前年份减去出生年份的结果</code>

The above is the detailed content of How to call functions in vue. For more information, please follow other related articles on the PHP Chinese website!