Petua untuk menggunakan pengiraan dan jam tangan untuk melaksanakan pengiraan dan pemantauan data dalam Vue

Vue.js ialah rangka kerja bahagian hadapan JavaScript yang popular yang menyediakan ciri pengikatan data dan responsif yang kaya, membolehkan kami mengurus keadaan aplikasi web dengan mudah. Antaranya, pengiraan dan jam tangan ialah dua alat pemprosesan dan pemantauan data yang penting dalam Vue.js Artikel ini akan memperkenalkan cara menggunakannya untuk melaksanakan teknik pengiraan dan pemantauan data.

1.computed

computed property adalah harta yang bergantung kepada nilai hartanah lain Maksudnya, apabila nilai hartanah lain berubah, harta yang dikira akan dikira semula secara automatik. Sifat pengiraan yang dikira mempunyai dua fungsi utama:

• digunakan untuk mengira data baharu, seperti memaparkan jumlah item senarai atau mengisih data senarai.
• Proses data sedia ada, seperti memformat tarikh atau jumlah, dsb.

1.1 Kira data baharu

Kami boleh mentakrifkan berbilang sifat yang dikira dalam objek yang dikira bagi tika Vue. Hasil yang dikembalikan oleh harta yang dikira boleh digunakan terus dalam templat dan ia hanya akan dikira semula apabila sifat bergantung berubah. Berikut ialah contoh:

<template>
  <div>
    <p>商品数量: {{ products.length }}</p>
    <ol>
      <li v-for="(product, index) in sortedProducts" :key="index">
        {{ product.name }} - ${{ product.price }}
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { name: "iPhone 12", price: 799 },
        { name: "MacBook Air", price: 999 },
        { name: "iPad Pro", price: 699 },
        { name: "AirPods Pro", price: 249 },
      ]
    }
  },
  computed: {
    sortedProducts: function() {
      return this.products.sort((a, b) => a.price - b.price);
    }
  }
}
</script>

Dalam contoh di atas, kami mengisih senarai produk dengan mengira atribut. Hartanah yang dikira sortedProducts mengisih harga produk dalam tertib menaik, dan kemudian mengembalikan hasil yang diisih kepada arahan v-for dalam templat untuk pemaparan.

Perlu diingatkan bahawa harta yang dikira hanya akan dikira semula apabila sifat itu bergantung kepada perubahan. Jadi, walaupun kita menggunakan this.products dalam harta dikira sortedProducts, sortedProducts tidak akan dikira semula selagi produk tidak berubah.

1.2 Memproses data sedia ada

Sifat yang dikira bukan sahaja boleh digunakan untuk mengira data baharu, tetapi juga boleh digunakan untuk memproses data sedia ada, seperti memformat tarikh atau jumlah, dsb. Berikut ialah contoh:

<template>
  <div>
    <p>订单时间: {{ formattedTime }}</p>
    <button @click="updateTime">更新时间</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderTime: new Date()
    }
  },
  computed: {
    formattedTime: function() {
      return this.orderTime.toLocaleString();
    }
  },
  methods: {
    updateTime: function() {
      this.orderTime = new Date();
    }
  }
}
</script>

Dalam contoh di atas, kami memformatkan masa pesanan ke dalam rentetan tarikh dan masa setempat (toLocaleString) dengan mengira atribut dan memaparkan hasil yang diformatkan dalam templat. Disebabkan sifat sifat yang dikira, formattedTime hanya akan dikira semula apabila orderTime berubah.

2. jam tangan

jam tangan ialah fungsi yang memantau sumber data bersatu secara mendalam. Tidak seperti dikira, apabila sumber data yang dipantau oleh jam tangan berubah, templat tidak akan dipaparkan semula secara automatik, tetapi operasi perlu dilakukan secara manual. jam tangan digunakan terutamanya untuk memantau perubahan dalam data untuk mencetuskan operasi yang sepadan. Berikut ialah contoh:

<template>
  <div>
    <p>剩余字符数: {{ charsLeft }}</p>
    <textarea v-model="text" @keyup="updateChars"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ""
    }
  },
  watch: {
    text: function(val) {
      if (val.length > 10) {
        alert("输入字符数不能超过10个!");
      }
    }
  },
  computed: {
    charsLeft: function() {
      return 10 - this.text.length;
    }
  },
  methods: {
    updateChars: function() {
      this.charsLeft = 10 - this.text.length;
    }
  }
}
</script>

Dalam contoh di atas, kami menggunakan jam tangan untuk memantau pembolehubah teks dalam kotak input. Apabila panjang teks melebihi 10 aksara, jam tangan akan mencetuskan operasi yang sepadan dan muncul kotak amaran untuk menghalang pengguna daripada terus memasukkan. Pada masa yang sama, kami mengira bilangan aksara yang tinggal melalui atribut terkira yang dikira Kami dapat melihat bahawa atribut charsLeft yang dikira hanya akan dikira semula apabila teks berubah.

Perlu diambil perhatian bahawa pembolehubah yang dipantau oleh jam tangan adalah fungsi dan akan menerima dua parameter: nilai baharu dan nilai lama. Kami boleh melakukan operasi yang sepadan berdasarkan dua parameter ini. jam tangan juga menyediakan pilihan lanjutan seperti pemantauan mendalam dan pelaksanaan segera, yang boleh dikonfigurasikan mengikut keperluan khusus.

3. Kesimpulan

dikira dan jam tangan adalah alat penting dalam Vue.js, yang sangat sesuai untuk pemprosesan dan pemantauan data yang kompleks. Kita boleh menentukan berbilang sifat yang dikira dalam pengiraan dan mengawal susunan pengiraan dan kaedah kemas kini melalui kebergantungan. Dalam jam tangan, kami boleh memantau sumber data dengan mendalam dan bertindak balas terhadap perubahan dalam sumber data dalam masa nyata. Walaupun pengiraan dan jam tangan mempunyai kos pembelajaran dan penggunaan tertentu, peningkatan dalam kos ini akan membantu anda membina aplikasi Vue yang lebih fleksibel dan cekap.

Atas ialah kandungan terperinci Petua untuk menggunakan pengiraan dan jam tangan untuk melaksanakan pengiraan dan pemantauan data dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!