Cara menggunakan penapis Vue untuk menapis amaun

Vue.js ialah rangka kerja JavaScript yang pantas dan fleksibel yang merupakan pilihan pertama untuk membina aplikasi web moden. Dalam Vue.js, kami boleh mencipta komponen boleh guna semula, mengemas kini DOM atas permintaan dan menambah penapis dengan mudah untuk mengendalikan data yang berbeza. Dalam artikel ini, kami akan membincangkan cara menapis amaun menggunakan penapis Vue.

Penapis Vue.js menyediakan cara mudah untuk memanipulasi pemformatan teks. Vuejs membolehkan kami menapis data secara automatik apabila memaparkannya dan memaparkannya dalam format yang pengguna mahu, seperti format mata wang. Menggunakan penapis boleh menjadikan kod kami lebih mudah dan bersih, serta boleh membantu kami mengurangkan pertindihan kod.

Penapis adalah sebahagian daripada contoh Vue.js dan boleh digunakan dalam templat. Menggunakan penapis dalam templat Vue.js adalah mudah, hanya gunakan simbol paip (|) dalam templat untuk menyalurkan data ke fungsi penapis. Berikut ialah contoh mudah menggunakan penapis mata wang:

<template>
  <div>
    <p>原始金额：{{ amount }}</p>
    <p>格式化后的金额：{{ amount | currency }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 1234.56,
    }
  },
  filters: {
    currency(value) {
      return `$${value.toFixed(2)}`
    },
  },
}
</script>

Dalam kod di atas, kami telah menentukan komponen dan mengisytiharkan pembolehubah yang dipanggil jumlah. Kami menghantar nilai pembolehubah amaun ke dalam fungsi penapis yang dipanggil mata wang dan menggunakan kaedah toFixed() untuk mengekalkannya kepada dua tempat perpuluhan dan menambahkannya dengan tanda dolar.

Apabila komponen dimulakan, Vue.js akan secara automatik mengenali fungsi mata wang dan mendaftarkannya sebagai penapis. Apabila kami menggunakannya dalam templat, kami boleh menyalurkan amaun ke penapis mata wang dan kemudian amaun itu akan dipaparkan pada halaman dalam bentuk yang diformatkan.

Penapis Vue.js dipanggil menggunakan aksara paip (|). Kita boleh menggunakan berbilang penapis pada elemen yang sama, contohnya:

<p>{{ amount | currency | capitalize }}</p>

Dalam kod di atas, Vue.js akan menggunakan mata wang dan menggunakan huruf besar penapis mengikut tertib, dan kemudian memaparkan hasil ke halaman.

Mentakrifkan penapis dalam Vue.js adalah sangat mudah, kita hanya perlu mengisytiharkan objek penapis dalam komponen dan menambah fungsi penapis padanya. Contohnya:

<script>
export default {
  data() {
    return {
      amount: 1234.56,
    }
  },
  filters: {
    currency(value) {
      return `$${value.toFixed(2)}`
    },
    capitalize(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    },
  },
}
</script>

Seperti yang dinyatakan di atas, kami mengisytiharkan objek yang dipanggil penapis dan menambah dua fungsi penapis padanya: mata wang dan huruf besar. Dalam templat, kita boleh menggunakan penapis ini dalam urutan untuk memaparkan data yang diformatkan.

Ringkasan:

Penapis Vue.js menyediakan cara mudah untuk memanipulasi pemformatan teks. Penapis boleh membantu kami memaparkan data yang lebih baik sambil menjadikan kod kami lebih ringkas dan boleh dibaca. Mentakrifkan penapis dalam Vue.js adalah sangat mudah, kita hanya perlu mengisytiharkan objek penapis dalam komponen dan menambah fungsi penapis padanya. Menggunakan penapis boleh menjadikan kod kami lebih mudah dan bersih, serta boleh membantu kami mengurangkan pertindihan kod.

Atas ialah kandungan terperinci Cara menggunakan penapis Vue untuk menapis amaun. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!