项目：动手写一个记录顾客信息的页面

12002

1. 本课介绍

在之前的课程里，我们学习了如何用VuetifyJS写一个数据增删改查操作的页面，并且化简了VuetifyJS自带的数据表格组件的模板与函数。

这个数据表格的组件，可以用在绝大多数数据增删改查的操作里。在这一课，我们会仿照之前学习的VuetifyJS的数据表格组件，写一个顾客信息管理系统。

2. 项目任务描述

任何一个店铺都需要管理自己的VIP顾客。在这一个项目任务中，我们需要写一个HTML页面，用VuetifyJS的数据表格组件来管理顾客的信息，能够录入、修改、删除顾客的信息。

完成的页面基本是这样的：

顾客列表：

录入顾客信息：

修改顾客信息：

删除顾客信息的确认框：

3. 顾客信息的数据

下面的变量customerList定义了一个顾客的信息数据列表：

  customerList: [
    {name: '张小花',id: 'vip01',age: '42',gender: '女', phone: '13012345678'},
    {name: '王小草',id: 'vip02',age: '35',gender: '男', phone: '13112345678'},
    {name: '张大花',id: 'vip03',age: '25',gender: '女', phone: '13212345678'},
    {name: '王大草',id: 'vip04',age: '39',gender: '男', phone: '13312345678'},
  ]

每个顾客的信息包括：

• name：姓名
• id：编号
• age：年龄
• gender：性别
• phone：电话号码

4. 参考代码

这是本课项目完成后的HTML文件代码。在你写完之后，你可以把这个参考代码下载到你的电脑上来学习如何写。