当前位置：首页 > VUE

vue实现通讯录代码

2026-01-07 05:01:23VUE

以下是一个基于Vue.js实现的通讯录示例代码，包含联系人列表、搜索和添加功能：

实现步骤

创建Vue组件

<template>
  <div class="address-book">
    <h3>通讯录</h3>
    <input v-model="searchQuery" placeholder="搜索联系人" class="search-input">

    <button @click="showAddForm = true" class="add-btn">添加联系人</button>

    <div v-if="showAddForm" class="add-form">
      <input v-model="newContact.name" placeholder="姓名">
      <input v-model="newContact.phone" placeholder="电话">
      <button @click="addContact">保存</button>
      <button @click="showAddForm = false">取消</button>
    </div>

    <ul class="contact-list">
      <li v-for="contact in filteredContacts" :key="contact.id" class="contact-item">
        <span>{{ contact.name }}</span>
        <span>{{ contact.phone }}</span>
        <button @click="deleteContact(contact.id)" class="delete-btn">删除</button>
      </li>
    </ul>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      contacts: [
        { id: 1, name: '张三', phone: '13800138000' },
        { id: 2, name: '李四', phone: '13900139000' }
      ],
      searchQuery: '',
      showAddForm: false,
      newContact: {
        name: '',
        phone: ''
      }
    }
  },
  computed: {
    filteredContacts() {
      return this.contacts.filter(contact => {
        return contact.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
               contact.phone.includes(this.searchQuery)
      })
    }
  },
  methods: {
    addContact() {
      if (this.newContact.name && this.newContact.phone) {
        this.contacts.push({
          id: Date.now(),
          ...this.newContact
        })
        this.newContact.name = ''
        this.newContact.phone = ''
        this.showAddForm = false
      }
    },
    deleteContact(id) {
      this.contacts = this.contacts.filter(contact => contact.id !== id)
    }
  }
}
</script>

样式部分

<style scoped>
.address-book {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.search-input {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
}

.contact-list {
  list-style: none;
  padding: 0;
}

.contact-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.add-btn {
  background-color: #4CAF50;
  color: white;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  margin-bottom: 15px;
}

.delete-btn {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.add-form {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.add-form input {
  display: block;
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
}
</style>