vue 记账清单_vue 的账单样式

  }
  .list-box {
    flex: 1;
    padding: 0 30px;
  }
  .list-box  a {
    text-decoration: none;
  }
  .echarts-box {
    width: 600px;
    height: 400px;
    padding: 30px;
    margin: 0 auto;
    border: 1px solid #ccc;
  }
  tfoot {
    font-weight: bold;
  }
  @media screen and (max-width: 1000px) {
    .contain {
      flex-wrap: wrap;
    }
    .list-box {
      width: 100%;
    }
    .echarts-box {
      margin-top: 30px;
    }
  }
</style>

      <!-- 添加资产 -->
      <form class="my-form">
        <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" />
        <input v-model.number="price" type="text" class="form-control" placeholder="消费价格" />
        <button type="button" class="btn btn-primary" @click="add()">添加账单</button>
      </form>

      <table class="table table-hover">
        <thead>
          <tr>
            <th>编号</th>
            <th>消费名称</th>
            <th>消费价格</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in list" :key="item.id">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td :class="{red: item.price >= 500}">{{item.price.toFixed(2)}}</td>
            <td><a @click="del(item.id)" href="javascript:;">删除</a></td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4">消费总计： {{totalPrice.toFixed(2)}}</td>
          </tr>
        </tfoot>
      </table>
    </div>
    
    <!-- 右侧图表 -->
    <div class="echarts-box" id="main"></div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  /**
   * 接口文档地址：
   * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
   * 
   * 功能需求：
   * 1. 基本渲染
   * 2. 添加功能
   * 3. 删除功能
   * 4. 饼图渲染
   */
  const app = new Vue({
    el: '#app',
    data: {
      list:[],
      name:'',
      price:''
    },
    created() {
      this.getlist()
    },
    mounted() {
      this.mychart = echarts.init(document.querySelector('#main'))
      this.mychart.setOption({
        title: {
          text: '消费账单列表',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '消费账单',
            type: 'pie',
            radius: '50%',
            data: [
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    computed:{
      totalPrice(){
        return this.list.reduce((sum,item) => sum+item.price , 0 )
      }
    },
    methods: {
      async getlist(){
        const res = await axios.get("https://applet-base-api-t.itheima.net/bill",{
        params:{
          creator:'guiji'
        }

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件