Bagaimana untuk melaksanakan fungsi Textarea nombor tulen secara automatik membungkus dan mengeluarkan Mantissa 0 dalam HTML?

Membina HTML Textarea: Menyedari nombor tulen untuk membungkus dan mengeluarkan sifar ekor secara automatik

Dalam pembangunan front-end, beberapa keperluan khas sering diperlukan untuk menangani, seperti membuat textarea HTML, menyedari nombor tulen untuk membungkus garisan, dan secara serentak mengeluarkan sifar pada ekor nombor. Berikut adalah penyelesaian untuk menyelesaikan masalah ini dan memenuhi keperluan pengguna:

Pengguna ingin membuat textarea yang secara automatik membungkus garisan apabila nombor input terlalu panjang dan secara automatik menghilangkan sifar trailing. Sebagai contoh, masukkan 123456789.234000 dan kesan paparan yang dikehendaki ialah:

 <code>123456 789.234</code>

Tetapi pada masa yang sama, nilai asal 123456789.234000 perlu dikekalkan di dalam komponen VUE.

Untuk mencapai fungsi ini, kita boleh menggabungkan rangka kerja Vue.js untuk menggunakan peristiwa v-model dan keyup untuk memproses input pengguna. Berikut adalah contoh kod komponen VUE yang berdaya maju:

<template>
  <div>
    <textarea v-model="formattedNumber"></textarea>
    <p>Nilai Asal: {{OriginalNumber}}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const originalNumber = ref('');
    const formattedNumber = ref('');

    const formatNumber = () => {
      // 去除非数字和多余小数点
      let num = formattedNumber.value.replace(/[^\d.]/g, '').replace(/\.(?=.*\.)/g, '');

      // 去除尾部零
      num = parseFloat(num).toString();

      originalNumber.value = num; // 更新原始数值

      // 自动换行 (每6位换行)
      formattedNumber.value = num.match(/.{1,6}/g).join('\n');
    };

    return {
      originalNumber,
      formattedNumber,
      formatNumber,
    };
  },
};
</script>

Dalam komponen ini:

• originalNumber menyimpan nilai angka asal.
• formattedNumber digunakan untuk memaparkan nombor yang diformat dan mengikat ke v-model textarea .
• Fungsi formatNumber dilaksanakan apabila acara keyup dicetuskan dan bertanggungjawab untuk memformat nombor:
  • Gunakan ungkapan biasa untuk menghapuskan aksara bukan angka dan titik perpuluhan tambahan.
  • Gunakan parseFloat untuk mengeluarkan sifar ekor.
  • Pecahkan nombor ke dalam kumpulan setiap 6 digit dan gabungkan mereka dengan garis baru untuk mencapai rehat garis automatik.

Dengan cara ini, angka -angka yang dilihat oleh pengguna dalam textarea diformat, tetapi nilai berangka asal masih dikekalkan di dalam komponen VUE, memenuhi semua keperluan pengguna.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi Textarea nombor tulen secara automatik membungkus dan mengeluarkan Mantissa 0 dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!