vue案例：动态添加数据、按关键字查找数据、删除数据

忘是亡心i 2022-03-02 13:16 180阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <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">
          // 数据双向绑定 v-model
            <label>
              Id:
              <input type="text" class="form-control" v-model="id">
            </label>
    
            <label>
              Name:
              <input type="text" class="form-control" v-model="name">
            </label>
    
            // Vue中，使用事件绑定机制，为元素指定处理函数的时候，
            // 如果加了小括号，就可以给函数传参了
            <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>
    // 自定义search 方法，同时把所有关键字，通过传参的形式，传递给search 方法
            <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>
        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() { 
    /*分析：
    1. 获取到 id 和 name ,直接从 data 上面获取 
    2. 组织出一个对象
    3. 把这个对象，调用 数组的 相关方法，添加到当前 data 上的 list 中
    4. 注意：在Vue中，已经实现了数据的双向绑定，当修改了 data 数据，
        Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；
    */
              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)
                  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 
              */
    
    //forEach、some、filter、findIndex都是数组的新方法，会对数组进行遍历，执行操作
        // 方法二：
              return this.list.filter(item => {
        /*注意 ： ES6中，为字符串提供了一个新方法
        String.prototype.includes('要包含的字符串')
        如果包含，则返回 true ，否则返回 false */
    
                if (item.name.includes(keywords)) {
                  return item
                }
              })
            }
          }
        });
      </script>
    </body>
    </html>

展示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDE0MTQ3Mw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDE0MTQ3Mw_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDE0MTQ3Mw_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDE0MTQ3Mw_size_16_color_FFFFFF_t_70]: /images/20220302/5718af9dbe6b4a5eaf517ed5b381ca69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDE0MTQ3Mw_size_16_color_FFFFFF_t_70 1]: /images/20220302/b6e7671f691c45329f82888bdc41000b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDE0MTQ3Mw_size_16_color_FFFFFF_t_70 2]: /images/20220302/28dd9a2b61fc4c71b83d569b0a9420c4.png