vue delete删除json数组_Vue记账项目-列表展示页

Scoped CSS-深度作用选择器

Scoped CSS | Vue Loader​vue-loader.vuejs.org

当<style>标签有scoped属性时，它的 CSS 只作用于当前组件中的元素。

如果希望scoped样式中的一个选择器能够作用得“更深”，可以使用/deep/或::v-deep（后者可以被sass认出来）操作符

由于Types组件是外部的，li是Types组件的元素，因此scoped作用不到li元素上，因此需要使用::v-deep深入到.x里面的组件元素

那如果组件里有多个li时，想要精准控制，则需要在前面添加前缀

表驱动形式：如果后面是真则要selected这个clss

ES6新语法，如果key里面有变量，可以用中括号包起来，此处classPrefix就是变量

制作三栏切换

新建组件Tabs.vue

从数据源获取数据

遍历数据源获取数据，并设置选中事件

声明通用类型

设置class当前的value正好等于选中的value

Tags.vue可以调整为通用组件，让class有两个类

将数据源模块化

Object.freeze不能修改地址，还不能修改内容

则无需Type.vue组件可删除

用列表展示数据

使用computed将List（数组）和type(收入、支出）、interval(按天、周、月)（两个string）结合起来组成一个新的列表（trees）

获取recordList,渲染数据，展示列表result

根据时间分组

此时发现不知道createdAt的类型是什么，recordList的类型是any

而之前已经声明了recordList的类型是RootState

这是一个bug,Vuex在得到store的时候，它不能将类型正确的返回

在全局中声明类型

现在recordList就有了类型，createdAt类型

这个是因为这个原因造成的

JSON.parse没有保证parse的类型是左右一致的

JSON不支持Date,JSON支持的类型:双引号括起来的字符串（string）、数值(number)、true、false、null、对象（object）或者数组（array）

所以Date会默认转成string

从而可以获取日期和时间

遍历result

要给group添加标题

数据排序

遍历对象的时候，key是没有办法保持顺序的，所以要将result改成一个数组,再进行排序

sort会改变原来的数组因此先clone一下

clone后面是any类型，调整为给传什么类型就返回什么类型

排序后分组

先将得到的数组进行排序，然后将第一个数组放入result里，遍历后面排序好的数组，将当前的数组和result里最后一个数组的item进行比较，如果相同（是不是同一天）就push到last一组里,如果不相同就push到result里

区分收入和支出

显示总数

forEach是没有返回值的map

此时发现amount的是字符串，修复bug

this.output是一个字符串，事件emit没有办法指定第二个参数的类型