• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >vue > vue.js实现价格格式化的方法

vue.js实现价格格式化的方法

作者:马优晨 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含vue.js实现tab切换,vue.js,vue.js 视频教程,vue.js2.0视频教程,vue.js项目实例等相关知识,马优晨 希望在学习及工作中可以帮助到您

这里分享一个常用的价格格式化的一个方法,在电商的价格处理中非常的实用,我们可以看一个效果

这里写图片描述

这里在价格数据的地方使用了一个过滤器,通过这个过滤器对价格做了保留小数位的处理。

HTML

<div class="price">
 <span v-html="goods.sale_price|format"></span>
 <span class="price-before">¥{{"这里是价格数据"}}</span>
</div>
</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>';
 }
}
</div>

以上所述是小编给大家介绍的vue.js实现价格格式化的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

</div>

您可能想查找下面的文章:

  • vue.js实现价格格式化的方法
  • Vue.js tab实现选项卡切换
  • Vue.js实现移动端短信验证码功能
  • 使用vue.js写一个tab选项卡效果
  • Vue.js组件tab实现选项卡切换
  • Vue.js实现简单动态数据处理
  • 基于Vue.js实现简单搜索框
  • Vue.js实现无限加载与分页功能开发
  • 基于Vue.js实现数字拼图游戏

相关文章

  • 2017-05-30Vue.js bootstrap前端实现分页和排序
  • 2017-05-30Vue实现双向数据绑定
  • 2017-05-30Vue.js计算属性computed与watch(5)
  • 2017-05-30vue.js指令和组件详细介绍及实例
  • 2017-05-30解析Vue2.0双向绑定实现原理
  • 2017-05-30基于Vue如何封装分页组件
  • 2017-05-30VUE实现日历组件功能
  • 2017-05-30vue2.0中goods选购栏滚动算法的实现代码
  • 2017-05-30Vue.js在使用中的一些注意知识点
  • 2017-05-30webpack+vue.js实现组件化详解

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • vue2.0组件之间的通信
    • Vue 进阶教程之v-model详解
    • VUE实现日历组件功能
    • 解析Vue2.0双向绑定实现原理
    • vue.js实现用户评论、登录、注册、及修改信息功能
    • 非常实用的vue导航钩子
    • Vue 实用分页paging实例代码
    • Vue.js前后端同构方案之准备篇——代码优化
    • VueJs与ReactJS和AngularJS的异同点
    • Vue.js结合bootstrap实现分页控件

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有