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 相关文章推荐
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
js时间查询插件使用详解
Apr 07 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
Angular.JS中的this指向详解
May 17 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 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
yii2缓存Caching基本用法示例
2016/07/18 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
PHP微商城开源代码实例
2019/03/27 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
jquery中ajax学习笔记一
2011/10/16 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
德国网上药房:Apotal
2017/04/04 全球购物
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
2013的个人自我评价
2013/12/26 职场文书
班组建设经验交流材料
2014/05/12 职场文书
蓬莱阁导游词
2015/02/04 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
2016年教代会开幕词
2016/03/04 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS