VUE-列表的添加、删除、搜索操作

页面结构如下：

列表dom结构如下：

<table class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Ctime</th>
          <th>Operation</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in search(keywords)" :key="item.id">
          <td>{{ item.id }}</td>
          <td v-text="item.name"></td>
          <td>{{ item.ctime | dateFormat() }}</td>
          <td>
            <a href="" @click.prevent="del(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>

添加功能：

• 1. 获取到 id 和 name ,直接从 data 上面获取
• 2. 组织出一个对象
•  3. 把这个对象，调用 数组的 相关方法，添加到 当前 data 上的 list 中
• 4. 注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；

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

删除功能：

• 1. 如何根据Id，找到要删除这一项的索引
• 2. 如果找到索引了，直接调用 数组的 splice 方法

 del(id) { // 根据Id删除数据
          var index = this.list.findIndex(item => {
            if (item.id == id) {
              return true;
            }
          })
          this.list.splice(index, 1)
        },

搜索功能：

• 表格循环的时候<tr v-for="item in search(keywords)" :key="item.id">，注意：item取自 search(keywords)方法

 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.includes(keywords)) {
              return item
            }
          })
        }