vue实现地址列表

Vue 实现地址列表

数据准备

定义一个地址数据数组，包含地址信息如姓名、电话、地址等字段。数据可以存储在组件的data中或通过API从后端获取。

data() {
  return {
    addresses: [
      { id: 1, name: '张三', phone: '13800138000', address: '北京市海淀区' },
      { id: 2, name: '李四', phone: '13900139000', address: '上海市浦东新区' }
    ]
  }
}

列表渲染

使用v-for指令循环渲染地址列表，结合v-bind动态绑定数据到模板。

<template>
  <div class="address-list">
    <div v-for="address in addresses" :key="address.id" class="address-item">
      <p>{{ address.name }}</p>
      <p>{{ address.phone }}</p>
      <p>{{ address.address }}</p>
    </div>
  </div>
</template>

样式设计

为地址列表添加CSS样式，确保布局美观。可以使用Flexbox或Grid布局。

.address-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.address-item {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

交互功能

添加编辑和删除功能，通过方法处理用户操作。

methods: {
  deleteAddress(id) {
    this.addresses = this.addresses.filter(address => address.id !== id);
  },
  editAddress(address) {
    // 跳转到编辑页面或弹出编辑对话框
  }
}

组件化

将地址列表拆分为可复用的子组件，提升代码可维护性。

<template>
  <address-item 
    v-for="address in addresses" 
    :key="address.id" 
    :address="address"
    @delete="deleteAddress"
  />
</template>

状态管理

对于复杂应用，使用Vuex或Pinia管理地址列表状态，确保数据一致性。

// Vuex示例
const store = new Vuex.Store({
  state: {
    addresses: []
  },
  mutations: {
    setAddresses(state, addresses) {
      state.addresses = addresses;
    }
  }
});

API集成

通过Axios或Fetch从后端API获取地址数据，并在组件挂载时加载。

mounted() {
  axios.get('/api/addresses').then(response => {
    this.addresses = response.data;
  });
}