vue组件实现通讯录案例

好的，这是一个简单的 Vue 组件通讯录案例：

<template>
  <div>
    <h3>通讯录</h3>
    <div>
      <input v-model="search" placeholder="搜索联系人">
      <button @click="addContact">添加联系人</button>
    </div>
    <ul>
      <li v-for="contact in filteredContacts" :key="contact.id">
        <p>{{ contact.name }}</p>
        <p>{{ contact.phone }}</p>
        <button @click="deleteContact(contact)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contacts: [
        { id: 1, name: "张三", phone: "13811111111" },
        { id: 2, name: "李四", phone: "13822222222" },
        { id: 3, name: "王五", phone: "13833333333" }
      ],
      search: ""
    };
  },
  computed: {
    filteredContacts() {
      return this.contacts.filter(contact => {
        return contact.name.toLowerCase().includes(this.search.toLowerCase());
      });
    }
  },
  methods: {
    addContact() {
      const name = prompt("请输入联系人姓名");
      const phone = prompt("请输入联系人电话");
      const id = this.contacts.length + 1;
      this.contacts.push({ id, name, phone });
    },
    deleteContact(contact) {
      const index = this.contacts.indexOf(contact);
      this.contacts.splice(index, 1);
    }
  }
};
</script>

这个组件包含一个搜索框、一个添加联系人按钮和一个联系人列表，可以搜索联系人、添加联系人和删除联系人。其中，`contacts` 是一个数组，存储所有联系人的信息；`search` 是一个字符串，存储搜索关键字；`filteredContacts` 是一个计算属性，根据搜索关键字过滤联系人；`addContact` 方法用于添加联系人；`deleteContact` 方法用于删除联系人。