vue.JS與html結合實現數字自動換行和去零處理的textarea
本文介紹如何構建一個特殊的textarea，實現純數字輸入，長數字自動換行，并自動去除小數點后多余的零。例如，輸入123456789.234000，顯示效果為123456n789.2n34，但底層數據仍保留原始值123456789.234000。
我們將使用Vue.js的ref來管理數據。定義兩個變量：textarea_number_data存儲原始數據，textarea_number用于顯示格式化后的數據。
首先，在Vue組件中，我們使用ref定義數據變量：
<script> import { ref } from 'vue'; export default { setup() { const textarea_number_data = ref(''); const textarea_number = ref(''); const formatNumber = (value) => { // 去除非數字和小數點，保留一個小數點 let cleanedValue = value.replace(/[^d.]/g, '').replace(/.(?=.*.)/g, ''); // 去除小數點后多余的零 cleanedValue = parseFloat(cleanedValue).toFixed(cleanedValue.includes('.') ? 3 : 0); // 保留三位小數，整數則不保留 textarea_number_data.value = cleanedValue; // 每六位數字換行 textarea_number.value = cleanedValue.replace(/(d{6})(?=d)/g, '$1n'); }; return { textarea_number_data, textarea_number, formatNumber }; }, }; </script>
然后，在模板中綁定數據和事件：
立即學習“前端免費學習筆記（深入）”；
<template> <div> <textarea v-model="textarea_number" @input="formatNumber(textarea_number)" placeholder="請輸入數字"></textarea> <p>原始數據: {{ textarea_number_data }}</p> </div> </template>
formatNumber函數負責數據處理：首先使用正則表達式清除無效字符，確保只有一個小數點；然后使用parseFloat和toFixed處理小數位，去除多余的零；最后，使用正則表達式每六位數字添加換行符。 @input事件監聽textarea的輸入變化，實時調用formatNumber函數進行格式化。
通過這個方法，我們實現了數字的自動換行和尾數零的去除，同時確保原始數據完整性。 用戶輸入的數據在textarea_number_data中以原始格式保存，而在textarea中顯示格式化后的結果。 這個方案比僅使用正則表達式更健壯，因為它處理了小數點后多余零的情況。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
