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 相关文章推荐
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 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
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
python求列表交集的方法汇总
2014/11/10 Python
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
详解pandas映射与数据转换
2021/01/22 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
九年级体育教学反思
2014/01/23 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL