vue 记账清单_vue 的账单样式

      <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'
        }
      })
      this.li

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

st = res.data.data
this.mychart.setOption({
series: [
{
data: this.list.map(item => ({value:item.price , name:item.name}))
}
]
})
},
async add(){
if(!this.name){
alert(‘请输入消费名称’)
return
}
if(typeof this.price !== “number”){
alert(‘请输入正确的消费价格’)
return
}
await axios.post(“https://applet-base-api-t.itheima.net/bill”,{
creator:‘guiji’,
name:this.name,
price:this.price
})
this.getlist()
this.name=‘’
this.price=‘’
},
async del(id){
axios.delete(https://applet-base-api-t.itheima.net/bill/${id})
this.getlist()
}
},
})

#### 总结

*   对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。



*   算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈...（最好多刷一刷，不然影响你的工资和成功率????）

*   在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。



*   要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！



![](https://img-blog.csdnimg.cn/img_convert/41a409bca685b4ea0e0aa1a5589c3e09.png)



第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。**如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说**，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。