Vue 필터 포맷 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Vue 필터 포맷 방법에 대한 자세한 설명

May 09, 2018 am 09:28 AM

체재 상해 필터

这次给大家带来Vue过滤器格式化方法详解，Vue过滤器格式化的注意事项有哪些，下面就是实战案例，一起来看一下。

前端处理一些金额，数字类的数据要求按照固定的格式显示，比如9,527,025，或者带有小数（如1,587.23）仍要三位一断。有些话也不必多说，既然要求如此，实现呗。

作为前端主流框架之一的Vue，类似的功能肯定都有人写的很完善了。我呢，最讨厌不动脑筋去网上找现成的，所以我自己写了一个。话不多说，先放效果图再贴代码(为了展现思路，我面向过程写的，另外这个是针对保留两位小数的数字进行过滤，因为保留整数的太简单了)。

&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html&quot;&gt;
  &lt;title&gt;Vue数字过滤器逢三一断&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p id=&quot;app&quot;&gt;
   &lt;h4&gt;说明：这个版本是针对保留两位小数的浮点数进行过滤格式化的&lt;/h4&gt;
   &lt;input type=&quot;number&quot; v-model=&quot;num&quot; /&gt;
   &lt;p&gt;{{num|NumFormat}}&lt;/p&gt;
  &lt;/p&gt;
 &lt;/body&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;vue.js&quot;&gt;&lt;/script&gt;
 &lt;script&gt;
  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
   },
  })
 &lt;/script&gt;
&lt;/html&gt;

로그인 후 복사

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