當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

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

發布時間：2023/12/15 综合教程 37 生活家

生活随笔收集整理的這篇文章主要介紹了 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>

結果展示

一個例子：用來輔助加深理解：可以不看

<!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>寫一個組件，時間：<spanv-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>

View Code

展示效果

吃飯去吧

總結

以上是生活随笔為你收集整理的moment.js插件的简单上手使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： object-c 运行时显示view没有
下一篇： Learning OSG program