jumlah fungsi vue.js

Vue.js ialah rangka kerja JavaScript popular yang menjadikan pembangunan bahagian hadapan lebih mudah dan pantas. Dalam Vue.js, kita boleh menggunakan fungsi untuk mengendalikan data dan melaksanakan beberapa pengiraan matematik mudah seperti penambahan, penolakan, pendaraban dan pembahagian.

Artikel ini akan memperkenalkan cara menggunakan Vue.js untuk melaksanakan fungsi penjumlahan fungsi.

Pertama, kita perlu mencipta objek data dalam Vue.js untuk menyimpan nilai yang perlu kita kira. Dalam contoh ini, kita mentakrifkan dua pembolehubah berangka a dan b dan memulakannya kepada 0:

new Vue({
  el: '#app',
  data: {
    a: 0,
    b: 0
  }
})

Pada halaman HTML, kita boleh menggunakan arahan model v untuk menggabungkan kotak input dengan sifat objek data Terikat. Ini bermakna apabila kami memasukkan nilai baharu dalam kotak input, Vue.js akan mengemas kini nilai hartanah secara automatik dalam objek data. Dalam contoh ini, kita mencipta dua kotak input untuk memasukkan nilai a dan b:

<div id="app">
  <input type="number" v-model="a">
  <input type="number" v-model="b">
</div>

Seterusnya, kita boleh mencipta fungsi pengiraan yang akan menggunakan dua nilai a dan b untuk mengira jumlah mereka. Dalam Vue.js, kita boleh mentakrifkan fungsi yang dipanggil jumlah dalam objek kaedah:

new Vue({
  el: '#app',
  data: {
    a: 0,
    b: 0
  },
  methods: {
    sum: function () {
      return this.a + this.b;
    }
  }
})

Akhir sekali, kita boleh menambah butang pada halaman HTML dan menambah klik padanya menggunakan pengendali acara arahan v-on. Apabila pengguna mengklik butang, kami akan memanggil fungsi jumlah dan memaparkan hasilnya pada halaman:

<div id="app">
  <input type="number" v-model="a">
  <input type="number" v-model="b">
  
  <button v-on:click="result = sum()">Calculate</button>
  
  <p>Result is: {{ result }}</p>
</div>

Dalam contoh ini, kami menyimpan hasil dalam pembolehubah dipanggil hasil dan menggunakan sintaks kurungan berganda Paparkannya pada muka surat. Apabila pengguna mengklik butang, Vue.js akan memanggil fungsi jumlah dan menyimpan hasilnya dalam pembolehubah hasil. Keputusan ini akan dikemas kini dan dipaparkan pada halaman.

Untuk meringkaskan, kami boleh melaksanakan fungsi penjumlahan fungsi melalui pengikatan dan kaedah data Vue.js. Vue.js menjadikan proses ini mudah dan pantas, membolehkan kami menumpukan lebih pada reka bentuk dan interaksi bahagian hadapan.

Atas ialah kandungan terperinci jumlah fungsi vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!