我正在参加 码上掘金体验活动，详情：show出你的创意代码块”

前言

好久以前练手的一个demo，最近拿出来重新梳理一下，demo很简单。bootstrap好久不用了就不细说了，主要讲一讲逻辑。

添加

在输入框输入ID和Name，通过v-model双向绑定，在add函数中通过this.id,this.name访问，将新加的ToDoList以对象的方式push进ToDoList数组中去。最后将输入框清零。

add() {
    let todolist = {id:this.id,name:this.name,ctime:new Date()}
    this.list.push(todolist)
    this.id = this.name = ''
}

删除

删除ToDoList的时候需要传入待删除的元素的id以便于查询，通过Array.prototype.findIndex()方法，找到索引值相同的进行删除。

del(id) {
    let index = this.list.findIndex(item => {
        if (item.id === id) {
            return true
        }
    })
    this.list.splice(index, 1)
},

搜索

通过输入的关键字，将关键字作为函数的形参传入。通过Array.prototype.includes()方法判断ToDoList数组中是否有包含关键字的。使用filter()进行数组遍历筛选。

search(keywords) {
    return this.list.filter(item => {
        //如果包含返回true
        if (item.name.includes(keywords)) {
            return item
        }
    })
}

细节

时间

此程序中有添加事件，但是不具有存储功能。通过设置全局过滤器对时间进行展示。

Vue.filter('dateFormat',function (dateStar) {
    let dt = new Date(dateStar)
    let y = dt.getFullYear()
    let m = dt.getMonth() + 1
    let d = dt.getDate()
    return y + '-' + m + '-' + d
})

后记

这个demo有很多不完整的部分，比如对数据的存储。元素的丰富之类的。但是对于初学者练手是一个很好的选择。