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中文网其它相关文章！
推荐阅读：
위 내용은 Vue 필터 포맷 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7564
15
1386
52
86
11
61
19
28
99
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의 나누기 작업 관련 지식을 자세히 설명하고 독자가 참고할 수 있는 특정 코드 예제를 제공합니다. 1. OracleSQL의 Division 연산
공개된 휴대폰 포맷 복구 방법의 비밀 (휴대폰 고장? 걱정하지 마세요)
May 04, 2024 pm 06:01 PM
요즘 우리는 전화를 켤 수 없거나 시스템 충돌과 같은 지연과 같은 몇 가지 문제에 필연적으로 직면하게 될 것입니다. 그러나 사용하는 동안 휴대폰은 우리 삶에서 없어서는 안될 부분이되었습니다. 우리는 종종 당황하며 때로는 이러한 문제에 대한 해결책이 없습니다. 휴대폰 문제를 해결하는 데 도움이 되도록 이 기사에서는 휴대폰 포맷 복구 및 휴대폰을 정상 작동으로 복원하는 몇 가지 방법을 소개합니다. 데이터 백업 - 포맷 과정에서 사진, 연락처 등 중요한 정보가 손실되지 않도록 보호하세요. 휴대폰을 포맷하기 전에 가장 먼저 고려해야 할 사항은 휴대폰에 있는 중요한 데이터와 파일을 백업하는 것입니다. 데이터 보안을 보장하거나 파일을 클라우드 스토리지 서비스로 전송하도록 선택하려면 컴퓨터에 연결하여 백업할 수 있습니다. 시스템에 내장된 복구 기능 사용 - 간단
노트북을 포맷하면 속도가 빨라지나요?
Feb 12, 2024 pm 11:54 PM
노트북을 포맷하면 속도가 빨라지나요? Windows 노트북을 포맷하고 싶지만 포맷하면 속도가 더 빨라지는지 알고 싶다면 이 문서가 이 질문에 대한 정답을 찾는 데 도움이 될 것입니다. 노트북을 포맷하면 속도가 빨라지나요? 사용자가 Windows 노트북을 포맷하는 데에는 여러 가지 이유가 있습니다. 그러나 가장 일반적인 이유는 노트북의 성능이나 속도가 느리기 때문입니다. 노트북을 포맷하면 C 드라이브나 Windows 운영 체제가 설치된 하드 드라이브 파티션에 저장된 모든 데이터가 완전히 삭제됩니다. 따라서 모든 사용자는 이 단계를 수행하기 전에 특히 노트북 성능과 관련하여 두 번 생각할 것입니다. 이 문서는 노트북을 포맷하면 속도가 빨라지는지 이해하는 데 도움이 됩니다. 노트북을 포맷하면 도움이 됩니다.
PHP 모듈로 연산자의 역할과 사용법에 대한 자세한 설명
Mar 19, 2024 pm 04:33 PM
PHP의 모듈로 연산자(%)는 두 숫자를 나눈 나머지를 구하는 데 사용됩니다. 이 글에서는 모듈로 연산자의 역할과 사용법을 자세히 논의하고 독자의 이해를 돕기 위해 구체적인 코드 예제를 제공합니다. 1. 모듈로 연산자의 역할 수학에서는 정수를 다른 정수로 나누면 몫과 나머지가 나옵니다. 예를 들어 10을 3으로 나누면 몫은 3이고 나머지는 1입니다. 이 나머지를 얻기 위해 모듈로 연산자가 사용됩니다. 2. 모듈러스 연산자의 사용법 PHP에서는 모듈러스를 나타내기 위해 % 기호를 사용합니다.
리눅스 시스템콜 system() 함수에 대한 자세한 설명
Feb 22, 2024 pm 08:21 PM
Linux 시스템 호출 system() 함수에 대한 자세한 설명 시스템 호출은 Linux 운영 체제에서 매우 중요한 부분으로 시스템 커널과 상호 작용하는 방법을 제공합니다. 그 중 system() 함수는 흔히 사용되는 시스템 호출 함수 중 하나이다. 이 기사에서는 system() 함수의 사용법을 자세히 소개하고 해당 코드 예제를 제공합니다. 시스템 호출의 기본 개념 시스템 호출은 사용자 프로그램이 운영 체제 커널과 상호 작용하는 방법입니다. 사용자 프로그램은 시스템 호출 기능을 호출하여 운영 체제를 요청합니다.
HTML 형식화 방법은 무엇입니까?
Mar 08, 2024 am 09:53 AM
HTML 형식화 방법: 1. 온라인 HTML 형식화 도구를 사용합니다. 2. Visual Studio Code의 Shift + Alt + F와 같은 코드 편집기와 함께 제공되는 HTML 형식화 바로 가기 키를 사용합니다. 3. Sublime과 같은 플러그인을 사용합니다. 텍스트 HTML/CSS/JS Prettify 플러그인 4. HTML Tidy와 같은 명령줄 도구를 사용합니다. 5. 코딩 표준 및 습관에 따른 수동 형식 지정.
