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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
js 表单验证方法(实用)
Apr 28 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 Javascript
分享一个vue实现的记事本功能案例
Apr 11 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
桌面中心(三)修改数据库
2006/10/09 PHP
php 动态多文件上传
2009/01/18 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
JS实现滑动插件
2020/01/15 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
python处理cookie详解
2014/02/07 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
python中添加模块导入路径的方法
2021/02/03 Python
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
政风行风整改方案
2014/10/25 职场文书
可怜妈妈观后感
2015/06/09 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书