當(dāng)前位置：首頁(yè) > 编程资源 > 综合教程 >内容正文

综合教程

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

發(fā)布時(shí)間：2023/12/15 综合教程 29 生活家

生活随笔收集整理的這篇文章主要介紹了 moment.js插件的简单上手使用小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

開發(fā)過程中看長(zhǎng)篇幅的技術(shù)文檔是件多么影響多發(fā)效率的事情丫，哼哼，人家明明只是想用個(gè)簡(jiǎn)單的功能而已丫，下面文檔很好的解決了這個(gè)問題，yeah~~~

一.monent.js時(shí)間插件

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

使用起來可以說是非常簡(jiǎn)單了

1. 安裝插件：

npm install moment

2.main.js中引入插件

 import moment from 'moment'
 //全局過濾器
 Vue.filter('dateFmt',(input,formatString="YYYY-MM-DD")=>{
     //es5函數(shù)參數(shù)設(shè)置默認(rèn)值
     //const lastFormatString = formatString || ''

     /**
      * moment(input) 把時(shí)間字符串轉(zhuǎn)成時(shí)間對(duì)象
      * format(formatString) 把時(shí)間對(duì)象，按照指定格式，格式化成符合條件的字符串
      */
     return moment(input).format(formatString)
 })

3.在相應(yīng)的goodslist文件中寫入 | dateFmt即可

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

4.完工：展示效果

另一個(gè)：

<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>

結(jié)果展示

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

<!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>寫一個(gè)組件，時(shí)間：<spanv-model="time"></span></p> -->
    </div>

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

            <div class="add">
                編號(hào):
                <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="請(qǐng)輸入搜索條件">
            </div>
            <table class="tb">
                <tr>
                    <th>編號(hào)</th>
                    <th>品牌名稱</th>
                    <th>創(chuàng)立時(shí)間</th>
                    <th>操作</th>
                </tr>
                <!-- 動(dòng)態(tài)生成內(nèi)容tr -->
                <tr v-if="list.length==0">
                    <td colspan="4">沒有數(shù)據(jù)了哦</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>
    //定義和注冊(cè)組件
    //關(guān)于命名約定 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
            },
            //根據(jù)id刪除
            deleteBrand(id) {
                //es6的新語(yǔ)法
                //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
            },
            //根據(jù)關(guān)鍵字搜索
            search() {
                if (this.keyword.trim().length == 0) {
                    this.list = this.oldList

                    return
                }

                //利用數(shù)組的filter方法去過濾我們?cè)兀^濾出來之后，會(huì)形成一個(gè)新的數(shù)組
                //參考:http://www.runoob.com/jsref/jsref-filter.html
                const newList = this.list.filter(function (item, index, arr) {
                    //es6中，判斷我們字符串中，是否包含得有某個(gè)字符，使用includes
                    //參考：http://es6.ruanyifeng.com/#docs/string#includes-startsWith-endsWith
                    return item.name.includes(this.keyword)
                }, this)

                //把過濾出來的新數(shù)組，賦值給list
                this.list = newList
            }
        }
    })
    const vm = new Vue({
        el: "#app"
    })
</script>

</html>

View Code

展示效果

吃飯去吧

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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