vue2 过滤器 | 过滤时间 Monent.js的使用

<p><code></p> <p>本文主要是写给新手的,我自己也是一个新手。大牛请忽略~如果有错误请指出<br />最近在写Vue的项目中遇到了时间转换的问题,所以就开始找资料。<br />发现可以使用Vue的<a href="https://cn.vuejs.org/v2/api/#Vue-filter-id-definition" rel="nofollow noreferrer" target="_blank">过滤器(filter)</a>来处理<br />处理时间的业界牛逼类库 <a href="http://momentjs.com/docs/#/parsing/" rel="nofollow noreferrer" target="_blank">moment.js</a><br />下面来说一下用法<br />第一步:安装</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install moment --save " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> moment <span class="hljs-comment">--save </span> </code></pre> <p>第二步:在main.js中引用</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import moment from 'moment/moment' " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> moment <span class="hljs-keyword">from</span> <span class="hljs-string">'moment/moment'</span> </code></pre> <p>第三步:在main.js中添加过滤器</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="Vue.filter('moment', function (value, formatString) { formatString = formatString || 'YYYY-MM-DD HH:mm:ss'; // return moment(value).format(formatString); // value可以是普通日期 20170723 return moment.unix(value).format(formatString); // 这是时间戳转时间 }); /* eslint-disable no-new */ new Vue({ el: '#app', template: '<App></span>', components: { App } }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code>Vue.filter(<span class="hljs-string">'moment'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(value, formatString)</span> </span>{ formatString = formatString || <span class="hljs-string">'YYYY-MM-DD HH:mm:ss'</span>; <span class="hljs-comment">// return moment(value).format(formatString); // value可以是普通日期 20170723</span> <span class="hljs-keyword">return</span> moment.unix(value).format(formatString); <span class="hljs-comment">// 这是时间戳转时间</span> }); <span class="hljs-comment">/* eslint-disable no-new */</span> <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, template: <span class="hljs-string">'&lt;App/&gt;'</span>, components: { App } }) </code></pre> <p>第四步: 在vue页面中使用过滤器</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template> </p> <div id=&quot;app&quot;> <div> {{ datetime | moment }} </div> </p></div> <p> </template> <script> export default { name: 'app', data () { return { datetime: '1500799859' } } } </script> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> {{ datetime | moment }} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'app'</span>, data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">datetime</span>: <span class="hljs-string">'1500799859'</span> } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>第五步: 结果</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="2017-07-23 16:50:59 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code>2017<span class="hljs-selector-tag">-07-23</span> 16<span class="hljs-selector-pseudo">:50</span><span class="hljs-selector-pseudo">:59</span> </code></pre> <p></code></p>
脚本宝典为你提供优质服务
脚本宝典 » vue2 过滤器 | 过滤时间 Monent.js的使用

发表评论

提供最优质的资源集合

立即查看 了解详情