Vue如何将过滤器格式化
这次给大家带来Vue如何将过滤器格式化，Vue将过滤器格式化的注意事项有哪些，下面就是实战案例，一起来看一下。
前端处理一些金额，数字类的数据要求按照固定的格式显示，比如9,527,025，或者带有小数（如1,587.23）仍要三位一断。有些话也不必多说，既然要求如此，实现呗。
作为前端主流框架之一的Vue，类似的功能肯定都有人写的很完善了。我呢，最讨厌不动脑筋去网上找现成的，所以我自己写了一个。话不多说，先放效果图再贴代码(为了展现思路，我面向过程写的，另外这个是针对保留两位小数的数字进行过滤，因为保留整数的太简单了)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Vue数字过滤器逢三一断</title>
</head>
<body>
<p id="app">
<h4>说明：这个版本是针对保留两位小数的浮点数进行过滤格式化的</h4>
<input type="number" v-model="num" />
<p>{{num|NumFormat}}</p>
</p>
</body>
<script type="text/javascript" src="vue.js"></script>
<script>
Vue.filter('NumFormat', function(value) {
if(!value) return '0.00';
var intPart = Number(value).toFixed(0); //获取整数部分
var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
var floatPart = ".00"; //预定义小数部分
var value2Array = value.split(".");
//=2表示数据有小数位
if(value2Array.length == 2) {
floatPart = value2Array[1].toString(); //拿到小数部分
if(floatPart.length == 1) { //补0,实际上用不着
return intPartFormat + "." + floatPart + '0';
} else {
return intPartFormat + "." + floatPart;
}
} else {
return intPartFormat + floatPart;
}
})
var app = new Vue({
el: "#app",
data: {
num: 0
},
})
</script>
</html>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci Vue如何将过滤器格式化. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1664
14
1423
52
1321
25
1269
29
1249
24
Bagaimana untuk memformat pemacu c menggunakan arahan dos
Feb 19, 2024 pm 04:23 PM
Arahan DOS ialah alat baris arahan yang digunakan dalam sistem pengendalian Windows, yang boleh digunakan untuk melaksanakan pelbagai tugas dan operasi pengurusan sistem. Salah satu tugas biasa ialah memformat cakera keras, termasuk pemacu C. Memformat pemacu C adalah operasi yang agak berbahaya kerana ia akan memadamkan semua data pada pemacu C dan memulakan semula sistem fail. Sebelum melakukan operasi ini, pastikan anda telah menyandarkan fail penting dan mempunyai pemahaman yang jelas tentang kesan pemformatan pada komputer anda. Berikut diformatkan dalam baris arahan DOS
Apakah pemformatan cakera
Aug 17, 2023 pm 04:02 PM
Pemformatan cakera merujuk kepada proses membina semula dan mengosongkan sistem fail cakera Semasa proses pemformatan cakera, semua data akan dipadam sepenuhnya, dan sistem fail akan diwujudkan semula untuk menyimpan semula data pada cakera. Pemformatan cakera boleh digunakan untuk melindungi keselamatan data, membaiki kegagalan cakera dan membuang virus Semasa memformat cakera, anda perlu membuat sandaran data penting, memilih sistem fail yang sesuai dan menunggu dengan sabar untuk pemformatan selesai.
Mengapa pemacu D tidak boleh diformatkan?
Aug 30, 2023 pm 02:39 PM
Sebab mengapa pemacu D tidak boleh diformatkan termasuk pemacu sedang digunakan oleh program atau proses lain, terdapat sistem fail yang rosak pada pemacu, kegagalan cakera keras dan isu kebenaran. Pengenalan terperinci: 1. Sebab mengapa pemacu D tidak boleh diformatkan mungkin kerana pemacu sedang digunakan oleh program atau proses lain Dalam sistem pengendalian Windows, jika program mengakses fail atau folder pada pemacu D, sistem tidak akan dapat melakukan operasi format ; 2. Sebab mengapa pemacu D tidak boleh diformat mungkin kerana terdapat sistem fail yang rosak Sistem fail digunakan oleh sistem pengendalian untuk mengatur dan mengurus fail folder pada peranti storan, dsb.
Rahsia kaedah pemulihan format telefon bimbit (telefon mudah alih rosak? Jangan risau)
May 04, 2024 pm 06:01 PM
Pada masa kini, kita pasti akan menghadapi beberapa masalah seperti tidak dapat menghidupkan telefon, ketinggalan, dan lain-lain, seperti ranap sistem, tetapi semasa penggunaan, telefon bimbit telah menjadi bahagian yang sangat diperlukan dalam kehidupan kita. Kami sering mengalami kerugian, dan kadangkala, tiada penyelesaian untuk masalah ini. Untuk membantu anda menyelesaikan masalah telefon bimbit, artikel ini akan memperkenalkan anda kepada beberapa kaedah pemulihan format telefon bimbit dan memulihkan telefon anda kepada operasi biasa. Sandarkan data - lindungi maklumat penting, seperti foto dan kenalan, daripada hilang semasa proses pemformatan Sebelum memformat telefon anda, perkara pertama yang perlu dipertimbangkan ialah menyandarkan data dan fail penting pada telefon anda. Untuk memastikan keselamatan data, atau memilih untuk memindahkan fail ke perkhidmatan storan awan, anda boleh menyandarkannya dengan menyambung ke komputer. Gunakan fungsi pemulihan terbina dalam sistem - mudah
Langkah mudah dan berkesan untuk menyelesaikan ralat 0x80070057
Dec 27, 2023 am 08:38 AM
Bagaimana untuk menyelesaikan ralat 0x80070057: kaedah dan langkah yang mudah dan berkesan Pengenalan: Dalam proses menggunakan komputer, kadangkala kita menghadapi pelbagai kod ralat. Antaranya, 0x80070057 ialah kod ralat yang sangat biasa, yang biasanya berkaitan dengan sistem pengendalian Windows. Kod ralat ini boleh muncul dalam situasi yang berbeza, seperti semasa memasang atau mengemas kini sistem pengendalian, menyandarkan atau memulihkan fail, memformat pemacu, dsb. Walaupun kod ralat ini mengecewakan, ia tidak boleh diselesaikan. Artikel ini akan memperkenalkan
Gunakan fungsi fmt.Sprint untuk memformat berbilang nilai ke dalam rentetan dan mengembalikannya, termasuk maklumat jenis
Jul 25, 2023 am 09:01 AM
Gunakan fungsi fmt.Sprint untuk memformat berbilang nilai ke dalam rentetan dan mengembalikannya, termasuk maklumat jenis Dalam bahasa Go, pakej fmt menyediakan banyak fungsi untuk memformat data ke dalam rentetan. Antaranya, fungsi fmt.Sprint boleh memformat berbilang nilai ke dalam rentetan dan mengembalikannya. Tidak seperti fungsi fmt.Sprintf, fungsi fmt.Sprint mengembalikan rentetan dan bukannya rentetan yang diformatkan. Berikut ialah contoh kod mudah menggunakan fungsi fmt.Sprint: pa
Apakah kaedah pemformatan html?
Mar 08, 2024 am 09:53 AM
Kaedah pemformatan HTML: 1. Gunakan alat pemformatan HTML dalam talian 2. Gunakan kekunci pintasan pemformatan HTML yang disertakan dengan editor kod, seperti Shift + Alt + F dalam Visual Studio Code 3. Gunakan pemalam, seperti dalam Sublime Teks pemalam HTML/CSS/JS Prettify 4. Gunakan alat baris arahan, seperti HTML Tidy 5. Pemformatan manual mengikut piawaian dan tabiat pengekodan.
Adakah memformat komputer riba akan menjadikannya lebih pantas?
Feb 12, 2024 pm 11:54 PM
Adakah memformat komputer riba akan menjadikannya lebih pantas? Jika anda ingin memformat komputer riba Windows anda tetapi ingin mengetahui sama ada ia akan menjadikannya lebih pantas, artikel ini akan membantu anda mengetahui jawapan yang betul untuk soalan ini. Adakah memformat komputer riba akan menjadikannya lebih pantas? Terdapat banyak sebab mengapa pengguna memformat komputer riba Windows mereka. Tetapi sebab yang paling biasa ialah prestasi yang perlahan atau kelajuan komputer riba anda. Memformat komputer riba akan memadam sepenuhnya semua data yang disimpan pada pemacu C atau partition cakera keras tempat sistem pengendalian Windows dipasang. Oleh itu, setiap pengguna akan berfikir dua kali sebelum mengambil langkah ini, terutamanya mengenai prestasi komputer riba. Artikel ini akan membantu anda memahami sama ada memformat komputer riba anda akan mempercepatkannya. Memformat komputer riba anda membantu
