开发过程中看长篇幅的技术文档是件多么影响多发效率的事情丫，哼哼，人家明明只是想用个简单的功能而已丫，下面文档很好的解决了这个问题，yeah~~~

一.monent.js时间插件

1.Moment.js 文档：http://momentjs.cn/docs/

使用起来可以说是非常简单了

1. 安装插件：

  1. npm install moment

2.main.js中引入插件

  1.  import moment from 'moment'
  2.  //全局过滤器
  3.  Vue.filter('dateFmt',(input,formatString="YYYY-MM-DD")=>{
  4.      //es5函数参数设置默认值
  5.      //const lastFormatString = formatString || ''
  6.  
  7.      /**
  8.       * moment(input) 把时间字符串转成时间对象
  9.       * format(formatString) 把时间对象，按照指定格式，格式化成符合条件的字符串
  10.       */
  11.      return moment(input).format(formatString)
  12.  })

3.在相应的goodslist文件中写入 | dateFmt即可

  1. <span>{{item.add_time | dateFmt}}</span>

4.完工：展示效果

另一个：

<span>{{item.add_time | dateFmt('MMMM Do YYYY, h:mm:ss a') }}</span>

效果展示：

另一种：

  1. <span>{{item.add_time | dateFmt('YYYY-MM-DD HH:mm:ss') }}</span>

结果展示

一个例子：用来辅助加深理解：可以不看

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  10.     <style>
  11.         #app {
  12.             width: 600px;
  13.             margin: 10px auto;
  14.         }
  15.  
  16.         .tb {
  17.             border-collapse: collapse;
  18.             width: 100%;
  19.         }
  20.  
  21.         .tb th {
  22.             background-color: #0094ff;
  23.             color: white;
  24.         }
  25.  
  26.         .tb td,
  27.         .tb th {
  28.             padding: 5px;
  29.             border: 1px solid black;
  30.             text-align: center;
  31.         }
  32.  
  33.         .add {
  34.             padding: 5px;
  35.             border: 1px solid black;
  36.             margin-bottom: 10px;
  37.         }
  38.     </style>
  39. </head>
  40.  
  41. <body>
  42.     <div id="app">
  43.         <brand-manager></brand-manager>
  44.         <!-- <p>写一个组件，时间：<span style="background:yellowgreen;"v-model="time"></span></p> -->
  45.     </div>
  46.  
  47.     <!-- 组件的template -->
  48.     <template id="templateId">
  49.         <div>
  50.  
  51.             <div class="add">
  52.                 编号:
  53.                 <input v-model="id" type="text"> 品牌名称:
  54.                 <input v-model="name" @keyup.enter="add" type="text">
  55.                 <input type="button" @click="add" value="添加">
  56.             </div>
  57.  
  58.             <div class="add">
  59.                 品牌名称:
  60.                 <input type="text" v-model="keyword" @keyup.13="search" placeholder="请输入搜索条件">
  61.             </div>
  62.             <table class="tb">
  63.                 <tr>
  64.                     <th>编号</th>
  65.                     <th>品牌名称</th>
  66.                     <th>创立时间</th>
  67.                     <th>操作</th>
  68.                 </tr>
  69.                 <!-- 动态生成内容tr -->
  70.                 <tr v-if="list.length==0">
  71.                     <td colspan="4">没有数据了哦</td>
  72.                 </tr>
  73.                 <tr v-for="item in list" :key="item.id">
  74.                     <td>{{item.id}}</td>
  75.                     <td>{{item.name}}</td>
  76.                     <td>{{item.ctime | dateFmt('-')}}</td>
  77.                     <td>
  78.                         <a href="javascript:void(0)" @click="deleteBrand(item.id)">删除</a>
  79.                     </td>
  80.                 </tr>
  81.             </table>
  82.  
  83.         </div>
  84.     </template>
  85.  
  86. </body>
  87. <script>
  88.     //定义和注册组件
  89.     //关于命名约定 https://cn.vuejs.org/v2/guide/components.html#%E7%BB%84%E4%BB%B6%E5%91%BD%E5%90%8D%E7%BA%A6%E5%AE%9A
  90.     Vue.filter('dateFmt', function (input, operator) {
  91.         const year = input.getFullYear()
  92.         const month = input.getMonth() + 1
  93.         const day = input.getDate()
  94.         return year + operator + month + operator + day
  95.     })
  96.     Vue.component('brandManager', {
  97.         template: "#templateId",
  98.         data() {
  99.             return {
  100.                 id: '',
  101.                 name: '',
  102.                 keyword: '',
  103.                 list: [{
  104.                         id: 1,
  105.                         name: '宝马',
  106.                         ctime: new Date()
  107.                     },
  108.                     {
  109.                         id: 2,
  110.                         name: '奥迪',
  111.                         ctime: new Date()
  112.                     }
  113.                 ],
  114.                 oldList: []
  115.             }
  116.         },
  117.         // filters: {
  118.         //     dateFmt(input, operator) {
  119.         //         const year = input.getFullYear()
  120.         //         const month = input.getMonth() + 1
  121.         //         const day = input.getDate()
  122.         //         return year + operator + month + operator + day
  123.         //     }
  124.         // },
  125.         methods: {
  126.             //增加
  127.             add() {
  128.                 console.log(this);
  129.                 this.list.push({
  130.                     id: this.id,
  131.                     name: this.name,
  132.                     ctime: new Date()
  133.                 })
  134.  
  135.                 //清空
  136.                 this.id = ''
  137.                 this.name = ''
  138.  
  139.                 this.oldList = this.list
  140.             },
  141.             //根据id删除
  142.             deleteBrand(id) {
  143.                 //es6的新语法
  144.                 //http://es6.ruanyifeng.com/#docs/array#%E6%95%B0%E7%BB%84%E5%AE%9E%E4%BE%8B%E7%9A%84-find-%E5%92%8C-findIndex
  145.                 const index = this.list.findIndex(function (item, index, arr) {
  146.                     return item.id === id;
  147.                 })
  148.  
  149.                 //删除
  150.                 this.list.splice(index, 1)
  151.  
  152.                 this.oldList = this.list
  153.             },
  154.             //根据关键字搜索
  155.             search() {
  156.                 if (this.keyword.trim().length == 0) {
  157.                     this.list = this.oldList
  158.  
  159.                     return
  160.                 }
  161.  
  162.                 //利用数组的filter方法去过滤我们元素，过滤出来之后，会形成一个新的数组
  163.                 //参考:http://www.runoob.com/jsref/jsref-filter.html
  164.                 const newList = this.list.filter(function (item, index, arr) {
  165.                     //es6中，判断我们字符串中，是否包含得有某个字符，使用includes
  166.                     //参考：http://es6.ruanyifeng.com/#docs/string#includes-startsWith-endsWith
  167.                     return item.name.includes(this.keyword)
  168.                 }, this)
  169.  
  170.                 //把过滤出来的新数组，赋值给list
  171.                 this.list = newList
  172.             }
  173.         }
  174.     })
  175.     const vm = new Vue({
  176.         el: "#app"
  177.     })
  178. </script>
  179.  
  180. </html>

展示效果

吃饭去吧

moment.js插件的简单上手使用的更多相关文章

  1. fastclick.js插件使用简单说明

    为什么存在延迟? 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作.     ...

  2. VUE图片懒加载-vue lazyload插件的简单上手使用（优化版本）

    在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...

  3. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  4. 免费而优秀的图表JS插件

    1.百度的Echart ECharts,缩写来自Enterprise Charts,是百度推出的一款开源的,商业级数据图表,它最初是为了满足百度公司商业体系里各种业务系统(如凤巢.广告管家等等)的报表 ...

  5. toastr.js插件用法

    toastr.js插件用法 toastr.js是一个基于jQuery的非阻塞通知的JavaScript库.toastr.js可以设定四种通知模式:成功.出错.警告.提示.提示窗口的位置.动画效果等都可 ...

  6. iScroll.js插件使用方法

    iScroll.js 用法参考 (share) 分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍 ...

  7. 【转】Vue.js 2.0 快速上手精华梳理

    Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...

  8. web前端常用js插件

    第一款:截图插件html2Canvas.js html2是一款强大的截图插件,只需引入js文件,依照官方给定的截图方法,就能截取对应DOM区域的内容.对于有些截图出现模糊偏移的问题,网上也有一堆解决方 ...

  9. 最牛的打字效果JS插件 typing.js

    最新在做公司的一个项目,需要实现一个敲打代码的动画效果,粗意味比较简单,果断自己直接开写,写着写着发现是一个坑.需要支持语法高亮,并不能直接简单的用setTimeout来动态附件innerHTML.苦 ...

随机推荐

  1. 算法（Algorithms）第4版 练习 1.3.219

    方法实现: //1.3.19 /** * remove the last node in the linked list whose first node is first * * @return r ...

  2. macd背离的级别

    1分钟的背离可以忽略不看. 5分钟的背离可以预测未来5-6个小时的股价. 15分钟级别的背离可以预测未来24小时之内的股价. 30分钟级别的背离可以做中线. 周线背离可以影响1-2年的股价. 背离级别 ...

  3. matlab的数组

    1.定义:同一类型的元素的集合. 2.生成:用[]创建,元素之间用逗号或者空格隔开. 第一例: >>a=[1,2,3,4] a = 1 2 3 4 注意,取矩阵的某几列,是这样a(:,2: ...

  4. 我所理解的RESTful Web API [设计篇]【转】

    原文:http://www.cnblogs.com/artech/p/restful-web-api-02.html <我所理解的RESTful Web API [Web标准篇]>Web服 ...

  5. ES设置字段搜索权重——Query-Time Boosting

    Query-Time Boosting In Prioritizing Clauses, we explained how you could use the boost parameter at s ...

  6. listen 57

    Secondhand Smoke Exposure Doubled Asthmatic Kids' Hospital Readmissions If your child has asthma哮喘, ...

  7. BZOJ1382：[Baltic2001]Mars Maps

    浅谈树状数组与线段树:https://www.cnblogs.com/AKMer/p/9946944.html 题目传送门:https://www.lydsy.com/JudgeOnline/prob ...

  8. .Net 学习资源整理

    01.Visual Studio 隐藏的财富 --- C# 语言规范 安装完Visual Studio之后,我们好像忽略了,微软给我们准备的<C# 语言规范>. 路径参考下图: 02.MS ...

  9. JSP的优势 和劣势 与php的比较

    一 jsp的 优势 与劣势 由于JSP页面的内置脚本语言是基于Java编程语言的,而且所有的JSP页面都被编译成为Java Servlet,JSP页面就具有Java技术的所有好处,包括健壮的存储管理和 ...

  10. Java 日志记录规则

    Java 日志记录规则 规则一:日志是面向读者的 我们不应该让无价值的信息使日志文件变得乱糟糟,比如说完整打印所有的实体字段. 通常,实体名字和其逻辑关键字足以识别在表格中的一条记录了. 规则二:匹配 ...