vue-2.2過濾器的使用與時間格式化

<script>
    // 添加全局過濾器， 進行時間格式化
    Vue.filter('dateFormat',function (dateStr, pattern='') {
        // 根據給定的時間字符串， 得到特定的時間
        var dt = new Date(dateStr)

        // yyyy-mm-dd
        var y = dt.getFullYear()
        var m = (dt.getMonth() + 1).toString().padStart(2,'0')
        var d = dt.getDate().toString().padStart(2,'0')

        // return y + '-' + m + '-' + ''d
        // return `${y}-${m}-${d}`

        if (pattern.toLowerCase() === 'yyyy-mm-dd') {
            return `${y}-${m}-${d}`
        } else {
            var hh = dt.getHours().toString().padStart(2,'0')
            var mm = dt.getMinutes().toString().padStart(2,'0')
            var ss = dt.getSeconds().toString().padStart(2,'0')
            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        }

    })
    var vm = new Vue({
        el: '#app',
        data: {
            id:"",
            name:"",
            keywords:"",
            list: [
                {id: 1, name: '奔馳', ctime: new Date()},
                {id: 2, name: '寶馬', ctime: new Date()},
                {id: 3, name: '奧迪', ctime: new Date()},
                {id: 4, name: '林肯', ctime: new Date()},
            ]
        },
        methods: {
            add() { // 添加的方法
                // 分析：
                // 1. 獲取到 id 和 name ，直接從 data 上面獲取
                // 2. 組織出一個對象
                // 3. 把這個對象，調用 數組的 相關方法，添加到 當前 data 上的 list 中
                // 4. 注意：在Vue中，已經實現了數據的雙向綁定，每當我們修改了 data 中的數據，Vue 會默認監聽到數據的改動，自動把最新的數據，應用到頁面上；
                // 5. 我們更多的是進行 VM 中 Model 數據的操作，同時，在操作 Model 數據的時候，制定的業務邏輯操作；
                var car = {id:this.id, name:this.name, ctime:new Date()};
                this.list.push(car)
                this.id = this.name = ""
            },
            del(id) { // 根據Id 刪除數據
                // 分析：
                // 1. 如何根據Id ，找到要刪除這一項的索引
                // 2. 如果找到索引了，直接調用 數組的splice方法

                /*this.list.some((item,i)=>{
                    if (item.id == id) {
                        this.list.splice(i , 1)
                        // 在數組的some方法中，如果 return true, 就會立即終止這個數組的后續循環
                        return true;
                    }
                })*/

                var index = this.list.findIndex(item => {
                    if (item.id == id) {
                        return true;
                    }
                })
                this.list.splice(index, 1)
            },
            search(keywords) { // 根據關鍵字，進行數據的搜索
                var newList = []
                /*this.list.forEach(item =>{
                    if (item.name.indexOf(keywords) != -1){
                        newList.push(item)
                    }
                })
                return newList;*/
                return this.list.filter(item => {
                    /*if (item.name.indexOf(keywords) != -1)*/
                    // 注意： ES6中，為字符串提供了一個新方法，叫做 String.prototype.includes('要包含的字符串')
                    // 如果包含，則返回 true ，否則返回 false
                    if (item.name.includes(keywords)){
                        return item;
                    }
                })
            }
        }
    })

    var vm2 = new Vue({
        el:'#app2',
        data:{
            dt:new Date()
        },
        methods:{

        },
        filters:{ // 定義私有過濾器  過濾器有兩個 條件 【過濾器名稱 和 處理函數】
            dateFormat: function(dateStr, pattern='') {
                var dt = new Date(dateStr)

                // yyyy-mm-dd
                var y = dt.getFullYear()
                var m = (dt.getMonth() + 1).toString().padStart(2,'0')
                var d = dt.getDate().toString().padStart(2,'0')

                if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                    return `${y}-${m}-${d}`
                } else {
                    var hh = dt.getHours()
                    var mm = dt.getMinutes().toString().padStart(2,'0')
                    var ss = dt.getSeconds().toString().padStart(2,'0')
                    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                }
            }
        }
    })




    // 過濾器的定義語法
    // Vue.filter('過濾器的名稱', funciton(){})

    // 過濾器中的function ,第一個參數，已經被規定死了，永遠都是 過濾器 管道符前面 傳遞過來的數據
    /*Vue.filter('過濾器名稱', function(data) {
        return data + '123'
    }*/
</script>