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

AI Hentai Generator
Menjana ai hentai secara percuma.

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



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

Sistem pengendalian Windows ialah salah satu sistem pengendalian yang paling popular di dunia, dan versi baharunya Win11 telah menarik perhatian ramai. Dalam sistem Win11, mendapatkan hak pentadbir adalah operasi penting Hak pentadbir membolehkan pengguna melakukan lebih banyak operasi dan tetapan pada sistem. Artikel ini akan memperkenalkan secara terperinci cara mendapatkan kebenaran pentadbir dalam sistem Win11 dan cara mengurus kebenaran dengan berkesan. Dalam sistem Win11, hak pentadbir dibahagikan kepada dua jenis: pentadbir tempatan dan pentadbir domain. Pentadbir tempatan mempunyai hak pentadbiran penuh ke atas komputer tempatan

Penjelasan terperinci tentang operasi bahagi dalam OracleSQL Dalam OracleSQL, operasi bahagi ialah operasi matematik yang biasa dan penting, digunakan untuk mengira hasil pembahagian dua nombor. Bahagian sering digunakan dalam pertanyaan pangkalan data, jadi memahami operasi bahagian dan penggunaannya dalam OracleSQL adalah salah satu kemahiran penting untuk pembangun pangkalan data. Artikel ini akan membincangkan pengetahuan berkaitan operasi bahagian dalam OracleSQL secara terperinci dan menyediakan contoh kod khusus untuk rujukan pembaca. 1. Operasi bahagian dalam OracleSQL

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

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

Operator modulo (%) dalam PHP digunakan untuk mendapatkan baki pembahagian dua nombor. Dalam artikel ini, kami akan membincangkan peranan dan penggunaan pengendali modulo secara terperinci, dan memberikan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik. 1. Peranan pengendali modulo Dalam matematik, apabila kita membahagi integer dengan integer lain, kita mendapat hasil bagi dan baki. Sebagai contoh, apabila kita membahagi 10 dengan 3, hasil bahagi ialah 3 dan selebihnya ialah 1. Operator modulo digunakan untuk mendapatkan baki ini. 2. Penggunaan operator modulo Dalam PHP, gunakan simbol % untuk mewakili modulus

Penjelasan terperinci tentang fungsi sistem panggilan sistem Linux() Panggilan sistem ialah bahagian yang sangat penting dalam sistem pengendalian Linux Ia menyediakan cara untuk berinteraksi dengan kernel sistem. Antaranya, fungsi system() adalah salah satu fungsi panggilan sistem yang biasa digunakan. Artikel ini akan memperkenalkan penggunaan fungsi system() secara terperinci dan memberikan contoh kod yang sepadan. Konsep Asas Panggilan Sistem Panggilan sistem ialah satu cara untuk atur cara pengguna berinteraksi dengan kernel sistem pengendalian. Program pengguna meminta sistem pengendalian dengan memanggil fungsi panggilan sistem

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.
