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;
});
}
