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 相关文章推荐
Stop SQL Server
Jun 21 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
原生JS实现轮播图效果
Oct 12 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连接MySQL代码的参数说明
2008/06/07 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
input按钮的事件处理大全
2010/12/10 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
sklearn的predict_proba使用说明
2020/06/28 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
.net开发工程师面试题
2014/02/25 面试题
幼儿园春季开学寄语
2014/04/03 职场文书
《画》教学反思
2014/04/14 职场文书
秘书英文求职信
2014/04/16 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
消防演习感想
2015/08/10 职场文书
民事调解协议书
2016/03/21 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL
Mysql排序的特性详情
2021/11/01 MySQL
python​格式化字符串
2022/04/20 Python