vue中收货地址代码
时间: 2024-01-21 15:17:02 浏览: 26
以下是一个简单的 Vue.js 收货地址组件示例:
```
<template>
<div>
<h2>收货地址</h2>
<form>
<div>
<label for="name">姓名:</label>
<input type="text" id="name" v-model="name">
</div>
<div>
<label for="phone">电话:</label>
<input type="text" id="phone" v-model="phone">
</div>
<div>
<label for="address">地址:</label>
<input type="text" id="address" v-model="address">
</div>
<div>
<label for="zip">邮编:</label>
<input type="text" id="zip" v-model="zip">
</div>
<button @click.prevent="submit">保存</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
phone: '',
address: '',
zip: ''
}
},
methods: {
submit() {
// 在这里可以将收货地址提交到后台进行保存
console.log({
name: this.name,
phone: this.phone,
address: this.address,
zip: this.zip
});
}
}
}
</script>
```
你可以根据自己的需求修改和完善这个组件。