Cara memanggil fungsi di Vue

Kaedah Panggilan Fungsi dalam Vue: Kaedah Data: Dipanggil melalui objek ini, yang ditakrifkan dalam pilihan Kaedah. Fungsi Pengendali Acara: Mengikat peristiwa HTML melalui Arahan V-On, dan secara automatik dipanggil apabila acara itu dicetuskan.

Kaedah Memanggil Fungsi di Vue

Di Vue, terdapat dua cara utama untuk memanggil fungsi:

1. Kaedah data

Kaedah data ditakrifkan pada contoh VUE melalui pilihan methods dan boleh dipanggil melalui objek this dalam contoh.

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

2. Fungsi pengendalian acara

Pengendali acara terikat pada acara HTML melalui Arahan v-on dan secara automatik dipanggil apabila acara itu dicetuskan.

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

Parameter fungsi

Fungsi dalam VUE boleh menerima parameter, dan parameter diluluskan melalui kurungan selepas nama fungsi.

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

Pulangan data

Fungsi dalam Vue boleh mengembalikan data.

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

Atas ialah kandungan terperinci Cara memanggil fungsi di Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!