用vue加js写出一个团队管理的页面代码，要有查询和重置功能

以下是一个简单的团队管理页面的示例代码，使用Vue.js和JavaScript编写。该页面包含一个搜索框和一个重置按钮，可以根据关键词搜索团队成员，并在需要时重置搜索。

<template>
  <div>
    <input type="text" v-model="searchTerm" placeholder="输入关键词搜索" />
    <button @click="resetSearch">重置</button>
    <ul>
      <li v-for="teamMember in filteredTeamMembers" :key="teamMember.id">
        {{ teamMember.name }} ({{ teamMember.position }})
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTerm: "",
      teamMembers: [
        { id: 1, name: "张三", position: "前端开发工程师" },
        { id: 2, name: "李四", position: "后端开发工程师" },
        { id: 3, name: "王五", position: "产品经理" },
        { id: 4, name: "赵六", position: "测试工程师" },
        { id: 5, name: "钱七", position: "运维工程师" },
      ],
    };
  },
  computed: {
    filteredTeamMembers() {
      if (this.searchTerm) {
        return this.teamMembers.filter((teamMember) =>
          teamMember.name.toLowerCase().includes(this.searchTerm.toLowerCase())
        );
      } else {
        return this.teamMembers;
      }
    },
  },
  methods: {
    resetSearch() {
      this.searchTerm = "";
    },
  },
};
</script>

在上述示例中，我们在Vue实例的`data`选项中定义了两个属性：`searchTerm`和`teamMembers`。`searchTerm`用于存储搜索关键字，`teamMembers`是一个数组，其中包含团队成员的信息。

我们使用`v-model`指令将搜索框绑定到`searchTerm`属性上，并使用`@click`指令将重置按钮绑定到`resetSearch`方法上。当用户输入搜索关键字时，我们使用计算属性`filteredTeamMembers`来过滤团队成员列表。如果`searchTerm`为空，则显示所有团队成员。如果`searchTerm`不为空，则仅显示名字包含搜索关键字的团队成员。

最后，在`resetSearch`方法中，我们只需将`searchTerm`属性重置为空字符串即可清除搜索框的内容，使搜索重置为原始状态。