vue3基础-实战2: 完善小账本

在上节课中，我们完成了收支数据的添加，现在需要在首页渲染出添加的数据。

先在components文件夹下创建setBudgeDialog.vue文件

目录结构如下

任务目标👀

1. 在顶部显示当前的年月
2. 根据log数据填充数据(余额，支出，收入…)
3. 当记账后，首页数据马上更新
4. 在…上绑定打开设置总预算功能
5. 渲染出账单列表

🎞️学习视频：实战2

静态样式文件

setBudgeDialog

<script setup>
// ToDo
// 1.当弹框打开时，在输入框中显示之前的预算数值，并且可以修改
// 2.输入预算后如果点击确定，关闭弹框，并且将预算值保存到缓存(localStorage)中,
//   如果点击取消按钮，关闭弹框不做任何修改

</script>

<template>
  <div v-if="modelValue">
    <div class="dialog-mask-box"></div>
    <div class="dialog-box">
      <div