Rumah hujung hadapan web tutorial js Vue过滤器格式化方法详解

Vue过滤器格式化方法详解

May 09, 2018 am 09:28 AM
format Penjelasan terperinci penapis

这次给大家带来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>
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Angular集成三方UI框架、控件使用详解

源生Node.js注册邮箱激活说明详解

Atas ialah kandungan terperinci Vue过滤器格式化方法详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk memformat pemacu c menggunakan arahan dos 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

Penjelasan terperinci tentang mendapatkan hak pentadbir dalam Win11 Penjelasan terperinci tentang mendapatkan hak pentadbir dalam Win11 Mar 08, 2024 pm 03:06 PM

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 bahagian dalam Oracle SQL Penjelasan terperinci tentang operasi bahagian dalam Oracle SQL Mar 10, 2024 am 09:51 AM

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

Rahsia kaedah pemulihan format telefon bimbit (telefon mudah alih rosak? Jangan risau) 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

Adakah memformat komputer riba akan menjadikannya lebih pantas? 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

Penjelasan terperinci tentang peranan dan penggunaan pengendali modulo PHP Penjelasan terperinci tentang peranan dan penggunaan pengendali modulo PHP Mar 19, 2024 pm 04:33 PM

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(). Penjelasan terperinci tentang fungsi sistem panggilan sistem linux(). Feb 22, 2024 pm 08:21 PM

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

Apakah kaedah pemformatan html? 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.

See all articles