Vue实现人员列表(添加,删除,查询)

<template>
  <div id="app">
    <input type="text" placeholder="请输入id" v-model="id">
    <input type="text" placeholder="请输入姓名" v-model="name">
    <input type="text" placeholder="请输入年龄" v-model="age">
    <input type="text" placeholder="查询" v-model="keywords">
    <button @click="add">添加</button>
    <hr />
    <!--列表-->
    <ul>
      <li v-for="(item, index) in search(keywords)" :key="item.id">
        {{ item.id }}--{{ item.name }}--{{ item.age }}
        <button @click="del(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      id: '',
      name: '',
      age: '',
      keywords: '',
      list: [
        {
          id: 1,
          name: '张三',
          age: 18
        },
        {
          id: 2,
          name: '李四',
          age: 18
        },
        {
          id: 3,
          name: '王五',
          age: 18
        }
      ]
    }
  },
  methods: {
    add() {
      if (this.id && this.name && this.age != '') {
        let msg = { id: this.id, name: this.name, age: this.age };
        this.list.push(msg);
        this.id = this.name = this.age = '';
      }

    },
    del(index) {
      //findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置
      /*let index = this.list.findIndex(item => {
        if (item.id == this.id) {
          return true
        }
      })*/
      this.list.splice(index, 1)
    },
    search(keywords) {
      //filter() , 筛选符合项，并且返回新的数组
      return this.list.filter(item => {
        //item就是list
        //includes() 方法用于判断字符串是否包含指定的子字符串。
        //如果找到匹配的字符串则返回 true，否则返回 false。
        if (item.name.includes(keywords)) {
          //哪个包含关键词就返回哪个
          return item
        }
      })
    }
  }
}
</script>

<style></style>