<div id="app" v-cloak>
  <div class="box">
    <label>姓名：<input v-focus type="text" v-model="person.name"></label> <input type="button" :disabled="!person.name" value="添加" @click="add({name:person.name})">
  </div>
  <div class="box">
    <label>搜索：<input type="text" v-model="search.name" placeholder="请输入搜索姓名"></label>
  </div>
  <div>
    <table class="tb">
      <tr>
        <th>#</th>
        <th>姓名</th>
        <th>生日</th>
        <th>操作</th>
      </tr>
      <tr v-for="(person,i) in viewList">
        <td>{{i+1}}</td>
        <td>{{person.name}}</td>
        <td>{{person.birthday}}</td>
        <td>
          <a href="javascript:" @click="remove(i)">删除</a>
        </td>
      </tr>
      <tr v-if="!list.length">
        <td colspan="4">没有品牌数据</td>
      </tr>
    </table>
  </div>
</div>

#app {
  width: 600px;
  margin: 10px auto;
}
.tb {
  border-collapse: collapse;
  width: 100%;
}
.tb th {
  background-color: #0094ff;
  color: white;
}
.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}
.box {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
[v-cloak] {
  display: none;
}

const App = {
  data() {
    return {
      person: {},
      search: {},
      list: [
        { name: "John", age: 16, birthday: new Date() },
        { name: "Jack", age: 17, birthday: new Date() },
        { name: "Jvav", age: 18, birthday: new Date() }
      ]
    };
  },
  methods: {
    add(person) {
      this.person = {};
      person.birthday = new Date();
      this.list.push(person);
    },
    remove(index) {
      this.list.splice(index, 1);
    }
  },
  computed: {
    viewList() {
      return this.list
        .filter((p) => !this.search.name || p.name.includes(this.search.name))
        .map((p) => {
          p.birthday = moment(p.birthday).format("YYYY-MM-DD HH:mm:ss");
          return p;
        });
    }
  },
  directives: {
    focus: {
      mounted(el) {
        Vue.nextTick(() => {
          el.focus();
        });
      }
    }
  }
};
Vue.createApp(App).mount("#app");