Vue单文件组件实现列表查询

Vue单文件组件实现列表查询

接上面构建的项目–使用Vue单文件组件添加删除列表
进一步追加列表查询功能，界面如下：

添加搜索框，实现根据输入字段对列表进行过滤功能

功能实现

1、在TopContent.vue中添加搜索框模板

    <label>
      搜索:
      <input
        type= 'text'
        class= 'form-control'
      />
    </label>

2、在MainContent.vue中实现搜索功能的函数

    search (key) {
   
      return this.list.filter((ele) => {
   
        if