Vue Developer Interview
请用Vue.js 2.0或Vue.js .0以 “SFC 单文件组件” 编码方式完成以下购物车题目。除了Vue.js 2.0, Vue.js 3.0, bootstrap 外,请尽量少用第三方库。不可使用Element UI, Mint UI等第三方库。
时限 | 1小时 |
---|---|
提交方法 | 只需要把相关的.js和.vue文件用ZIP(不可用RAR或其他格式)压缩后电邮代码至 joe.mao@gz.questwork.com 和 don.lee@questwork.com。不要把脚手架文件如node_modules和第三方插件压缩在内。 |
电邮內必须寫下你的名字和微信号,另外再附上你的pdf簡历,否则不予处理。
目标
- 提供前端端购物车功能
购物车外观
购物车功能
- 自动计算总金额(必须)
- 能删除已选择产品
- 能更改数量
- 能按產品名稱排序
数据结构 Data Structure
购物车数据为本地数据,不必从网上撷取。
[ { id: 1, name: "Chicken Wing", category: "Food", qty: 3, price: 10 }, { id: 2, name: "Pizza", category: "Food", qty: 1, price: 50 }, { id: 3, name: "Hamburger", category: "Food", qty: 1, price: 12 }, { id: 4, name: "Coca Cola", category: "Drink", qty: 2, price: 5 }, { id: 5, name: "Orange Juice", category: "Drink", qty: 1, price: 15 }, { id: 6, name: "Potato Chips", category: "Snack", qty: 1, price: 8 }, ]
评分准则
- SFC组件设计
- 编码整洁
- 外覌
加分项
- 组件化,模块化代码。(e.g List.vue, Button.vue)
- 使用Vue的API计算商品总价、ES6的新规范新API处理数组等