Vue前端神器：数字货币、时间格式化一键搞定

数字货币格式化

现在咱们做网页时，总遇到给数字货币设计个美观的样式问题，就像要在用户看着顺眼的位置显示金额。Vue这货可是热门的前端引擎，有种超简单的方式，你就能搞定这任务。

npm install vue-currency-filter --save

安装和使用 currency 指令

yarn add vue-currency-filter

import Vue from 'vue'
import VueCurrencyFilter from 'vue-currency-filter'
Vue.use(VueCurrencyFilter)

想让你的Vue app里的数字货币看起来更有范儿？首先得装个叫做vue-currency-filter的工具包儿。搞定后，把它添加到你的Vue app中去。然后在Vue组件里面使用currency指令轻松把1000搞成$1,000.00的模式。再者，你可以自由设置输出格式！

自定义 currency 指令

其实，光用vue-currency-filter插件还不够咱们也可以自力更生，搞个货币格式化的指令出来！像numeral.js这个库就挺棒的。你只需要在Vue模板里加上它，马上就能让数字变成看得懂的钱数，比如说把1000写成$1,000.00！

时间格式化

import Vue from 'vue'
import numeral from 'numeral'
Vue.directive('currency', {
  bind: function (el, binding) {
    el.innerHTML = numeral(binding.value).format('$0,0.00')
  }
})

你造！除了数字货币这些，时间也是App开发中挺头疼的事儿。比如说我们自己玩儿的手机软件里，总想让日子显示得简单明了些，好让大家理解。但这事儿，Vue给咱们搞定！

安装和使用moment库

Vue里想搞定日期时间，试试momemt.js库呗！npm或yarn安装后就能搞到，只需在Vue组件中引入，然后在模板上加个moment指令就能随意展示任何形式的日期。

Vue中的全局时间格式化

npm install moment --save

不仅在每个组件里安装moment.js，我们也能将其设置为全局的日期格式转换器。以后哪儿要用到日期或者时间，直接调用这货就成了！Vue的filter功能里有个叫formatDate的，输入value和格式化字符串，运用moment.js就能搞定日期格式转换！

yarn add moment

看了这个攻略，你就会使用Vue指令搞定处理数字币、计时类数字的问题！你可以选插件也可以自己编码指令，目的就是提高工作效率和提供好用的产品给大家。希望这些技巧能够帮助你妥善处理各种项目中的数据展示问题！

import Vue from 'vue'
import moment from 'moment'
Vue.directive('moment', {
  bind: function (el, binding) {
    el.innerHTML = moment(binding.value).format(binding.arg || 'YYYY-MM-DD')
  }
})

。