vue.js如何实现价格格式化

这篇文章主要介绍了vue.js如何实现价格格式化，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

这里在价格数据的地方使用了一个过滤器，通过这个过滤器对价格做了保留小数位的处理。

HTML

<div class="price">
 <span v-html="goods.sale_price|format"></span>
 <span class="price-before">￥{{＂这里是价格数据＂}}</span>
</div>

JS

filters:{  //数据过滤器
 format:function(value){
  var html,_val;
  value =Number(value).toFixed(2);
  if(value==0){
   value=0;
   return html = "￥<span>0</span>";
  }else if(value.split('.')[1].substring(1)==0){
   value = Number(value).toFixed(1);
  }
  _val = value.split('.');
  return html = '￥<span>'+_val[0]+'</span><em>.'+_val[1]+'</em>';
 }
}

感谢你能够认真阅读完这篇文章，希望小编分享的“vue.js如何实现价格格式化”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注行业资讯频道，更多相关知识等着你来学习!