moment.js插件的简单上手使用

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

一.monent.js时间插件

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

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

1. 安装插件：

npm install moment

2.main.js中引入插件

 import moment from 'moment'
 //全局过滤器
 Vue.filter('dateFmt',(input,formatString="YYYY-MM-DD")=>{
     //es5函数参数设置默认值
     //const lastFormatString = formatString || ''

     /**
      * moment(input) 把时间字符串转成时间对象
      * format(formatString) 把时间对象，按照指定格式，格式化成符合条件的字符串
      */
     return moment(input).format(formatString)
 })

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

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

4.完工：展示效果

另一个：

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

效果展示：

另一种：

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

结果展示

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

moment.js插件的简单上手使用-风君雪科技博客

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <brand-manager></brand-manager>
        <!-- <p>写一个组件，时间：<span style="background:yellowgreen;"v-model="time"></span></p> -->
    </div>

    <!-- 组件的template -->
    <template id="templateId">
        <div>

            <div class="add">
                编号:
                <input v-model="id" type="text"> 品牌名称:
                <input v-model="name" @keyup.enter="add" type="text">
                <input type="button" @click="add" value="添加">
            </div>

            <div class="add">
                品牌名称:
                <input type="text" v-model="keyword" @keyup.13="search" placeholder="请输入搜索条件">
            </div>
            <table class="tb">
                <tr>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>创立时间</th>
                    <th>操作</th>
                </tr>
                <!-- 动态生成内容tr -->
                <tr v-if="list.length==0">
                    <td colspan="4">没有数据了哦</td>
                </tr>
                <tr v-for="item in list" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime | dateFmt('-')}}</td>
                    <td>
                        <a href="javascript:void(0)" @click="deleteBrand(item.id)">删除</a>
                    </td>
                </tr>
            </table>
            
        </div>
    </template>
  
</body>
<script>
    //定义和注册组件
    //关于命名约定 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
    Vue.filter('dateFmt', function (input, operator) {
        const year = input.getFullYear()
        const month = input.getMonth() + 1
        const day = input.getDate()
        return year + operator + month + operator + day
    })
    Vue.component('brandManager', {
        template: "#templateId",
        data() {
            return {
                id: '',
                name: '',
                keyword: '',
                list: [{
                        id: 1,
                        name: '宝马',
                        ctime: new Date()
                    },
                    {
                        id: 2,
                        name: '奥迪',
                        ctime: new Date()
                    }
                ],
                oldList: []
            }
        },
        // filters: {
        //     dateFmt(input, operator) {
        //         const year = input.getFullYear()
        //         const month = input.getMonth() + 1
        //         const day = input.getDate()
        //         return year + operator + month + operator + day
        //     }
        // },
        methods: {
            //增加
            add() {
                console.log(this);
                this.list.push({
                    id: this.id,
                    name: this.name,
                    ctime: new Date()
                })

                //清空
                this.id = ''
                this.name = ''

                this.oldList = this.list
            },
            //根据id删除
            deleteBrand(id) {
                //es6的新语法
                //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
                const index = this.list.findIndex(function (item, index, arr) {
                    return item.id === id;
                })

                //删除
                this.list.splice(index, 1)

                this.oldList = this.list
            },
            //根据关键字搜索
            search() {
                if (this.keyword.trim().length == 0) {
                    this.list = this.oldList

                    return
                }

                //利用数组的filter方法去过滤我们元素，过滤出来之后，会形成一个新的数组
                //参考:http://www.runoob.com/jsref/jsref-filter.html
                const newList = this.list.filter(function (item, index, arr) {
                    //es6中，判断我们字符串中，是否包含得有某个字符，使用includes
                    //参考：http://es6.ruanyifeng.com/#docs/string#includes-startsWith-endsWith
                    return item.name.includes(this.keyword)
                }, this)

                //把过滤出来的新数组，赋值给list
                this.list = newList
            }
        }
    })
    const vm = new Vue({
        el: "#app"
    })
</script>

</html>