Vue创建/删除/搜索

注意两点，这里直接在index当中引入的bootstrap。所以在这里或许看不到全部效果。但是功能百分百正常
1.创建三个输入框 目的是获取他们的v-model
2.在name里添加@keyup.enter="ck" 用来直接回车
3.列表整体架构

table开始创建盒子
——thead最顶部的标题
————tr竖着第一个
——————th横着放四个
——tbody同head，下半身列表
————tr竖着一个两个垂直增加
——————td横着四个    

4.this.id = this.name = "" 可以同时为空
5.xlist就是中介，用计算属性解决搜索问题
通俗的讲：当前所有数据遍历，并且所有lst的名字查找和输入框一样的返回给我
6.filters，和data同级。就是把现有的数据过滤。其中tm就是当前的mx.time。为的是把所有的时间有用的筛选出来

<template>
  <div id="app">
    <div class="centent">
      <div class="col-xs-4">
        ID: <input type="text" v-model="id">
      </div>

      <div class="col-xs-4">
        Name: <input type="text" v-model="name" @keyup.enter="ck">
        <button @click="ck()">点击</button>
      </div>

      <div class="col-xs-4">
        搜索: <input type="text" v-model="sou">
      </div>
    </div>


    <table class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>time</th>
          <th>rem</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(mx, key) in xlist" :key='mx.id'>
          <td>
            {{mx.id}}
          </td>
          <td>
            {{mx.name}}
          </td>
          <td>
            {{mx.time | nDate}}
          </td>
          <td>
            <a href="" @click.prevent="del(key)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        id: '',
        name: '',
        sb: true,
        list: [],
        sou: ''
      }
    },
    methods: {
      ck() {
        var ndata = {
          id: this.id,
          name: this.name,
          time: new Date()
        }
        this.list.push(ndata)
        this.id = this.name = ""

      },
      del(key) {
        this.list.splice(key, 1)
      }
    },
    computed: {
      xlist() {
         var a = this.list.filter((lst) => {
            console.log(lst)
            return lst.name.match(this.sou)
         })
         return a
      }
    },
    filters: {
      nDate(tm) {
        var dt = new Date(tm)
        var y = dt.getFullYear()
        var x = dt.getMonth() + 1
        var r = dt.getDate()
        var s = dt.getHours()
        var f = dt.getMinutes()
        var m = dt.getSeconds()


        s = xTime(s)
        f = xTime(f)
        m = xTime(m)

        function xTime(i) {
          if (i < 10) {
            return "0" + i
          }
          return i
        }

        return `${y}-${x}-${r} / ${s}:${f}:${m}`
      }
    }
  }
</script>