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创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
详解vue项目打包步骤
Mar 29 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 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
PHP 面向对象实现代码
2009/11/11 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
深入PHP FTP类的详解
2013/06/13 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
php fread读取文件注意事项
2016/09/24 PHP
php的扩展写法总结
2019/05/14 PHP
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
微信小程序云开发之新手环境配置
2019/05/16 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
简单的JAVA编程面试题
2013/03/19 面试题
同学会邀请书大全
2014/01/12 职场文书
优秀班主任材料
2014/12/16 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
二年级作文之动物作文
2019/11/13 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers