黑马学习记录--Vue实现列表的添加删除以及查找功能

柔情只为你懂 2022-03-19 15:20 424阅读 0赞

1.x 版本中的filterBy指令，在2.x中已经被废除：

[filterBy - 指令][filterBy -]

<tr v-for="item in list | filterBy searchName in 'name'">
    
      <td>{
       {item.id}}</td>
    
      <td>{
       {item.name}}</td>
    
      <td>{
       {item.ctime}}</td>
    
      <td>
    
        <a href="#" @click.prevent="del(item.id)">删除</a>
    
      </td>
    
    </tr>

在2.x版本中[手动实现筛选的方式][Link 1]：

*  筛选框绑定到 VM 实例中的 `searchName` 属性：

<hr> 输入筛选名称：
    
    <input type="text" v-model="searchName">

*  在使用 `v-for` 指令循环每一行数据的时候，不再直接 `item in list`，而是 `in` 一个 过滤的methods 方法，同时，把过滤条件`searchName`传递进去：

<tbody>
    
          <tr v-for="item in search(searchName)">
    
            <td>{
       {item.id}}</td>
    
            <td>{
       {item.name}}</td>
    
            <td>{
       {item.ctime}}</td>
    
            <td>
    
              <a href="#" @click.prevent="del(item.id)">删除</a>
    
            </td>
    
          </tr>
    
        </tbody>

*  `search` 过滤方法中，使用 数组的 `filter` 方法进行过滤：

search(name) {
    
      return this.list.filter(x => {
    
        return x.name.indexOf(name) != -1;
    
      });
    
    }

完整代码

<!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="./lib/vue-2.4.0.js"></script>
      <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
     
    </head>
    
    <body>
      <div id="app">
    
    
    
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">添加品牌</h3>
          </div>
          <div class="panel-body form-inline">
            <label>
              Id:
              <input type="text" class="form-control" v-model="id">
            </label>
    
            <label>
              Name:
              <input type="text" class="form-control" v-model="name">
            </label>
    
            
            <input type="button" value="添加" class="btn btn-primary" @click="add()">
    
            <label>
              搜索名称关键字：
              <input type="text" class="form-control" v-model="keywords">
            </label>
          </div>
        </div>
    
    
    
        <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 }}</td>
              <td>
                
                <a href="" @click.prevent="del(item.id)">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
    
    
    
      </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            id: '',
            name: '',
            keywords: '', // 搜索的关键字
            list: [
              { id: 1, name: '奔驰', ctime: new Date() },
              { id: 2, name: '宝马', ctime: new Date() }
            ]
          },
          methods: {
            add() { // 添加的方法
              // console.log('ok')
              // 分析：
              // 1. 获取到 id 和 name ,直接从 data 上面获取 
              // 2. 组织出一个对象
              // 3. 把这个对象，调用 数组的 相关方法，添加到 当前 data 上的 list 中
              // 4. 注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；
    
              // 5. 当我们意识到上面的第四步的时候，就证明大家已经入门Vue了，我们更多的是在进行 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;
                }
              })
    
              // console.log(index)
              this.list.splice(index, 1)
            },
            search(keywords) { // 根据关键字，进行数据的搜索
              /* var newList = []
              this.list.forEach(item => {
                if (item.name.indexOf(keywords) != -1) {
                  newList.push(item)
                }
              })
              return newList */
    
              // 注意：  forEach   some   filter   findIndex   这些都属于数组的新方法，
              //  都会对数组中的每一项，进行遍历，执行相关的操作；
              return this.list.filter(item => {
                // if(item.name.indexOf(keywords) != -1)
    
                // 注意 ： ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes('要包含的字符串')
                //  如果包含，则返回 true ，否则返回 false
                //  contain
                if (item.name.includes(keywords)) {
                  return item
                }
              })
    
              // return newList
            }
          }
        });
      </script>
    </body>
    
    </html>

[filterBy -]: https://v1-cn.vuejs.org/api/#filterBy
[Link 1]: https://cn.vuejs.org/v2/guide/list.html#%E6%98%BE%E7%A4%BA%E8%BF%87%E6%BB%A4-%E6%8E%92%E5%BA%8F%E7%BB%93%E6%9E%9C