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: ‘宝马‘,{id: 3,name: ‘奥迪‘,{id: 4,name: ‘林肯‘,]
        },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>