Vue过滤器格式化方法详解-js教程-PHP中文网

首页

web前端

js教程

Vue过滤器格式化方法详解

php中世界最好的语言

May 09, 2018 am 09:28 AM

格式化详解过滤器

这次给大家带来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中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7470

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

dos命令怎么格式化c盘 Feb 19, 2024 pm 04:23 PM

DOS命令是一种在Windows操作系统中使用的命令行工具，它可以用于执行各种系统管理任务和操作。其中一个常用的任务是格式化硬盘驱动器，包括C盘。格式化C盘是一个比较危险的操作，因为它将会清除C盘上的所有数据，并将文件系统重新初始化。在执行这个操作之前，确保你已经备份了重要的文件，并且清楚地了解格式化操作对你的计算机会产生的影响。下面是在DOS命令行中格式化

Win11管理员权限获取详解 Mar 08, 2024 pm 03:06 PM

Windows操作系统是全球最流行的操作系统之一，其新版本Win11备受瞩目。在Win11系统中，管理员权限的获取是一个重要的操作，管理员权限可以让用户对系统进行更多的操作和设置。本文将详细介绍在Win11系统中如何获取管理员权限，以及如何有效地管理权限。在Win11系统中，管理员权限分为本地管理员和域管理员两种。本地管理员是指具有对本地计算机的完全管理权限

Oracle SQL中的除法运算详解 Mar 10, 2024 am 09:51 AM

OracleSQL中的除法运算详解在OracleSQL中，除法运算是一种常见且重要的数学运算操作，用于计算两个数相除的结果。除法在数据库查询中经常用到，因此了解OracleSQL中的除法运算及其用法是数据库开发人员必备的技能之一。本文将详细讨论OracleSQL中除法运算的相关知识，并提供具体的代码示例供读者参考。一、OracleSQL中的除法运算

手机格式化恢复方法大揭秘（手机故障？别急） May 04, 2024 pm 06:01 PM

现如今，无法开机等，卡顿，我们难免会遇到一些问题，比如系统崩溃、但在使用过程中、手机已成为我们生活中不可或缺的一部分。我们往往束手无策、而有时、对于这些问题的解决方法。帮助你解决手机故障，本文将为大家介绍一些手机格式化恢复的方法、让手机重新恢复正常运行。备份数据——保护重要信息安全通讯录等，如照片、联系人、以免在格式化过程中丢失、在进行手机格式化之前、首先要考虑的是备份手机上的重要数据和文件。确保数据的安全性、或者选择将文件传输至云存储服务中，可以通过连接电脑进行备份。使用系统自带恢复功能——简

格式化笔记本电脑会使其速度更快吗？ Feb 12, 2024 pm 11:54 PM

格式化笔记本电脑会使其速度更快吗？如果您想格式化您的Windows笔记本电脑，但想知道它是否会使速度更快，本文将帮助您了解这个问题的正确答案。格式化笔记本电脑会使其速度更快吗？用户格式化Windows笔记本电脑的原因有很多。但最常见的原因是笔记本电脑的性能或速度缓慢。格式化笔记本电脑会彻底删除C盘或安装Windows操作系统的硬盘分区上存储的所有数据。因此，每个用户在采取这一步之前都会三思而后行，尤其是在笔记本电脑的性能方面。本文将帮助您了解格式化笔记本电脑是否会加快速度。格式化笔记本电脑有助于

html格式化的方法有哪些 Mar 08, 2024 am 09:53 AM

html格式化方法：1、使用在线HTML格式化工具；2、使用代码编辑器自带的HTML格式化快捷键，如Visual Studio Code中的Shift + Alt + F；3、使用插件，如Sublime Text中的HTML/CSS/JS Prettify插件；4、使用命令行工具，如HTML Tidy；5、手动格式化，按照编码规范和习惯进行手动格式化。

PHP模运算符的作用及用法详解 Mar 19, 2024 pm 04:33 PM

PHP中的模运算符（%）是用来获取两个数值相除的余数的。在本文中，我们将详细讨论模运算符的作用及用法，并提供具体的代码示例来帮助读者更好地理解。1.模运算符的作用在数学中，当我们将一个整数除以另一个整数时，会得到一个商和一个余数。例如，当我们将10除以3时，商为3，余数为1。模运算符就是用来获取这个余数的。2.模运算符的用法在PHP中，使用%符号来表示模

linux系统调用system()函数详解 Feb 22, 2024 pm 08:21 PM

Linux系统调用system()函数详解系统调用是Linux操作系统中非常重要的一部分，它提供了一种与系统内核进行交互的方式。其中，system()函数是一个常用的系统调用函数之一。本文将详细介绍system()函数的使用方法，并提供相应的代码示例。系统调用的基本概念系统调用是用户程序与操作系统内核交互的一种方式。用户程序通过调用系统调用函数来请求操作系统

See all articles

Vue过滤器格式化方法详解

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题