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 相关文章推荐
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
vue构建单页面应用实战
Apr 10 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
vue中activated的用法
Jan 03 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
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
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
jquery创建div 实现代码
2009/04/27 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
香港礼品网站:GiftU eshop
2017/09/01 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
总经理职责
2013/12/22 职场文书
网络优化专员求职信
2014/05/04 职场文书
文明工地标语
2014/06/16 职场文书
学校体育节班级口号
2015/12/25 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
Python List remove()实例用法详解
2021/08/02 Python
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏