vue 案例-添加 删除 搜索

vue案例-添加/删除/搜索

摘要：本案例利用html中table标签，通过tr添加、删除、搜索过滤，演示vue中如何不通过操作dom，快速修改数据。
截图：

• html

  <h1>我的汽车</h1>
      <div id="app">
        <p>
          id<input v-model="id" /> 品牌<input name="logo" v-model="logo" />
          <input type="button" value="添加" @click="add()" />
          搜索<input v-model="keyword" />
        </p>
        <table>
          <th>
            <td>id</td>
            <td>品牌</td>
            <td>时间</td>
            <td>操作</td>
          </th>
          <tr v-for="(item,index) in search(keyword)" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.logo }}</td>
            <td>{{ item.datetime }}</td>
            <td><a href="" @click.prevent="delitem(index)">删除</a></td>
          </tr>
        </table>
      </div>
  

• javascript

  <script>
       Vue.filter('datefmt', function(dt,fmt=""){
          var y = dt.getFullYear()
          var m = dt.getMonth()
          var d = dt.getDate()
          if(fmt.toLowerCase()=="yyyy-mm-dd"){
              return `${y}-${m}-${d}`
          }else{
              var hh = dt.getHours()
              var mm = dt.getMinutes()
              var ss = dt.getSeconds().toString()
              return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
          }
  
       })
        /**
         * 1 添加数据
         *   绑定input标签内容到td
         *   tr for
         * 2 add button 绑定methods 将该项添加到datalist中
         * 3 删除功能 绑定a标签 从datalist中移除该项
         *
         **/
        var app = new Vue({
          el: "#app",
          data: {
            logo: "",
            id: "",
            keyword: "",
            dataList: [
              {
                id: "1",
                logo: "玛莎拉蒂",
                datetime: new Date(),
              },
              {
                id: "2",
                logo: "阿斯顿马丁",
                datetime: new Date(),
              },
            ],
          },
          methods: {
            add() {
              this.dataList.push({
                id: this.id,
                logo: this.logo,
                datetime: new Date(),
              });
            },
            delitem(index) {
              console.log(index);
              this.dataList.splice(index, 1);
            },
            search(keyword) {
              // 方法1 遍历列表，找到符合调降的元素，添加到新列表
              newList = [];
              this.dataList.forEach((item) => {
                if (item.logo.indexOf(keyword) != -1) {
                  newList.push(item);
                }
              });
              return newList;
            },
          },
        });
      </script>