Vueで機能を呼び出す方法

VUEの関数呼び出しメソッド：データ方法：メソッドオプションで定義されているインスタンスのこのオブジェクトを介して呼び出されます。イベントハンドラー機能：V-onディレクティブを介してHTMLイベントにバインドし、イベントがトリガーされたときに自動的に呼び出されます。

VUEの関数を呼び出す方法

Vueでは、関数を呼び出す主な方法が2つあります。

1。データ方法

データ方法はmethodsオプションを介してVUEインスタンスで定義され、インスタンスでthisオブジェクトを介して呼び出すことができます。

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

2。イベント処理機能

イベントハンドラーはv-onディレクティブを介してHTMLイベントにバインドされ、イベントがトリガーされたときに自動的に呼び出されます。

 <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>

関数パラメーター

VUEの関数はパラメーターを受け入れることができ、パラメーターは関数名の後に括弧を介して渡されます。

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

データを返します

VUEの関数はデータを返すことができます。

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

以上がVueで機能を呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。