vue.js实现价格格式化的方法


Posted in Javascript onMay 23, 2017

这里分享一个常用的价格格式化的一个方法,在电商的价格处理中非常的实用,我们可以看一个效果

vue.js实现价格格式化的方法

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

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实现价格格式化的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript中expression的用法整理
May 13 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
React更新渲染原理深入分析
Dec 24 Javascript
js编写选项卡效果
May 23 #Javascript
jQuery日期范围选择器附源码下载
May 23 #jQuery
详解JavaScript数组过滤相同元素的5种方法
May 23 #Javascript
强大的 Angular 表单验证功能详细介绍
May 23 #Javascript
微信小程序 侧滑删除(左滑删除)
May 23 #Javascript
最常用的jQuery表单验证(简单)
May 23 #jQuery
jquery实现简单实用的轮播器
May 23 #jQuery
You might like
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
PHP XML数据解析代码
2010/05/26 PHP
PHP中英混合字符串截取函数代码
2011/07/17 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
代码生成器 document.write()
2007/04/15 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
python 全文检索引擎详解
2017/04/25 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
详解python中list的使用
2019/03/15 Python
python将图片转base64,实现前端显示
2020/01/09 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
如何解决安装python3.6.1失败
2020/07/01 Python
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
abstract class和interface有什么区别
2013/08/04 面试题
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
学期个人工作总结
2015/02/13 职场文书
人口与计划生育责任书
2015/05/09 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记