超级会员免费看
本文介绍了如何使用Vue.js实现一个记账清单应用，包括数据的获取、渲染，以及消费统计功能。功能涵盖在组件创建时发送请求获取数据、使用v-for指令渲染列表、计算属性进行消费统计。同时，文章还详细讲述了如何添加和删除记账项，以及利用Echarts库实现实时更新的饼图渲染。通过这个项目，读者可以学习到Vue的响应式数据绑定和事件处理，以及前端数据可视化的实践。
记账清单和图标渲染
功能需求：
基本渲染
* (1) 立刻发送请求获取数据 created
* (2) 拿到数据，存到data的响应式数据中
* (3) 结合数据，进行渲染 v-for
* (4) 消费统计 => 计算属性
添加功能
* (1) 收集表单数据 v-model
* (2) 给添加按钮注册点击事件，发送添加请求
* (3) 需要重新渲染
删除功能
* (1) 注册点击事件，传参传 id
* (2) 根据 id 发送删除请求
* (3) 需要重新渲染
饼图渲染
* (1) 初始化一个饼图 echarts.init(dom) mounted钩子实现
* (2) 根据数据实时更新饼图 echarts.setOption({ … })
项目代码
容器视图代码
<div id=
订阅专栏 解锁全文
5097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
