表单输入绑定:外卖点餐 用户在外卖平台上选择菜品并调整数量,提交订单时会显示所有已选菜品及总价。 1)选择菜品和数量:可以通过复选框选择菜品,并调整数量; 2)总价:实时更新总价; 3)提交订单:显示订单信息和总价。 按以上要求,提供vue3代码
时间: 2024-10-09 17:05:40 浏览: 7
在Vue3中,可以使用`v-model`指令来进行表单输入的绑定,这里我们模拟一个简单的外卖点餐组件。首先,我们需要设置一个数据模型来存储菜品信息:
```javascript
<template>
<div>
<h2>外卖点餐</h2>
<!-- 菜品列表 -->
<ul>
<li v-for="(item, index) in dishes" :key="index">
<input type="checkbox" :value="item.name" v-model="selectedItems" @change="updateTotal(index)">
{{ item.name }} - {{ item.price }}
<span class="quantity">x {{ item.quantity }}</span>
<span class="total">{{ item.price * item.quantity }}</span>
</li>
</ul>
<!-- 总价 -->
<p>总价: {{ totalPrice }}</p>
<button @click="submitOrder">提交订单</button>
</div>
</template>
<script>
export default {
data() {
return {
dishes: [
{ name: '宫保鸡丁', price: 20, quantity: 1 },
// 添加更多菜品...
],
selectedItems: [], // 存储选中的菜品名
totalPrice: 0, // 总价初始值
};
},
methods: {
updateTotal(index) {
const item = this.dishes[index];
if (this.selectedItems.includes(item.name)) {
this.totalPrice += item.price * item.quantity;
} else {
this.totalPrice -= item.price * item.quantity;
}
},
submitOrder() {
console.log('正在提交订单...', this.selectedItems, this.totalPrice);
// 这里可以根据需求进一步处理,比如向服务器发送请求
},
},
};
</script>
<style scoped>
.quantity, .total {
margin-left: 10px;
}
</style>
```
在这个例子中,我们使用了`v-model`绑定了复选框的选择状态到`selectedItems`数组,当用户改变选择时,`updateTotal`方法会被调用,实时计算总价。点击提交按钮时,会打印出当前选中的菜品和总价。