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的ajax请求中删除X-Requested-With
Dec 11 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
vue-cli在 history模式下的配置详解
Nov 26 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
Python交换变量
2008/09/06 Python
python中实现定制类的特殊方法总结
2014/09/28 Python
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
python中添加模块导入路径的方法
2021/02/03 Python
求职推荐信
2013/10/28 职场文书
英语系本科生求职信范文
2013/12/18 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫