How Vue formats filters
这次给大家带来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中文网其它相关文章！
推荐阅读：
The above is the detailed content of How Vue formats filters. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to format c drive with dos command
Feb 19, 2024 pm 04:23 PM
DOS command is a command line tool used in Windows operating system, which can be used to perform various system management tasks and operations. One of the common tasks is to format the hard drive, including the C drive. Formatting the C drive is a relatively dangerous operation because it will erase all data on the C drive and reinitialize the file system. Before performing this operation, make sure you have backed up important files and have a clear understanding of the impact that formatting will have on your computer. The following is formatted in the DOS command line
What is disc formatting
Aug 17, 2023 pm 04:02 PM
Disc formatting refers to the process of rebuilding and clearing the disc's file system. During the disc formatting process, all data will be completely deleted, and the file system will be re-established to re-store data on the disc. Disc formatting can be used to protect data security, repair disc failures, and remove viruses. When formatting a disc, you need to back up important data, select an appropriate file system, and wait patiently for the formatting to complete.
Why can't the D drive be formatted?
Aug 30, 2023 pm 02:39 PM
The reasons why the D drive cannot be formatted include that the drive is being used by other programs or processes, there is a damaged file system on the drive, hard disk failure and permission issues. Detailed introduction: 1. The reason why the D drive cannot be formatted may be because the drive is being used by other programs or processes. In the Windows operating system, if a program is accessing the files or folders on the D drive, the system will not be able to perform the format operation. ;2. The reason why the D drive cannot be formatted may be because there is a damaged file system on the drive. The file system is used by the operating system to organize and manage files and folders on the storage device, etc.
Simple and effective steps to resolve 0x80070057 error
Dec 27, 2023 am 08:38 AM
How to solve 0x80070057 error: simple and effective methods and steps Introduction: In the process of using the computer, we sometimes encounter various error codes. Among them, 0x80070057 is a very common error code, which is usually related to Windows operating system. This error code can appear in different situations, such as when installing or updating the operating system, backing up or restoring files, formatting drives, etc. Although this error code is frustrating, it's not unsolvable. This article will introduce
Revealed secrets of cell phone format recovery methods (mobile phone malfunction? Don't worry)
May 04, 2024 pm 06:01 PM
Nowadays, we will inevitably encounter some problems such as being unable to turn on the phone or lagging, such as system crash, but during use, mobile phones have become an indispensable part of our lives. We are often at a loss, and sometimes, there are no solutions to these problems. To help you solve cell phone problems, this article will introduce you to some methods of cell phone format recovery and restore your phone to normal operation. Back up data - protect important information, such as photos and contacts, from being lost during the formatting process. Before formatting your phone, the first thing to consider is to back up important data and files on your phone. To ensure data security, or choose to transfer files to a cloud storage service, you can back it up by connecting to a computer. Use the system's built-in recovery function - simple
Use the fmt.Sprint function to format multiple values into strings and return them, including type information
Jul 25, 2023 am 09:01 AM
Use the fmt.Sprint function to format multiple values into strings and return them, including type information. In the Go language, the fmt package provides many functions for formatting data into strings. Among them, the fmt.Sprint function can format multiple values into strings and return them. Unlike the fmt.Sprintf function, the fmt.Sprint function returns a string instead of a formatted string. Here is a simple example code using the fmt.Sprint function: pa
Will formatting a laptop make it faster?
Feb 12, 2024 pm 11:54 PM
Will formatting a laptop make it faster? If you want to format your Windows laptop but want to know if it will make it faster, this article will help you know the right answer to this question. Will formatting a laptop make it faster? There are many reasons why users format their Windows laptops. But the most common reason is slow performance or speed of your laptop. Formatting a laptop will completely delete all data stored on the C drive or the hard drive partition where Windows operating system is installed. Therefore, every user will think twice before taking this step, especially when it comes to the performance of the laptop. This article will help you understand whether formatting your laptop will speed it up. Formatting your laptop helps
Computer formatting tutorial
Jan 08, 2024 am 08:21 AM
Many times when using a computer, you will encounter too much garbage, but many users still don’t know how to format the computer. It doesn’t matter. Here is a tutorial on computer formatting for you to take a look at. How to format a computer: 1. Right-click "This PC" on the desktop and click "Manage". 2. Click "Storage" in "Computer Management" to open "Disk Management". 3. Select the hard drive you want to clean, right-click and select "Format". 4. Check "Perform Quick Format" and click "OK" to start formatting.
