vue项目 / 资产管理

news2024/10/16 16:16:28

参考: https://blog.csdn.net/A_Common_Man/article/details/124601367

App.vue


<template>
  <div id="app">
    <div class = 'container'>

      <h4 style="text-align: center; margin-top: 20px">资产管理</h4>
      &nbsp;&nbsp;&nbsp;&nbsp;

      <table class="table">
        <thead>
          <tr>
            <th>编号</th>
            <th>资产名称</th>
            <th>价格</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <th>{{ item.id }}</th>
            <td>{{ item.name }}</td>
            <td>{{ item.price }}</td>
            <td>{{ item.time }}</td>
            <td><button type="button" class="btn btn-danger"  @click="delGoods(index)">删除</button></td>
          </tr>

          <tr v-if="list.length == 0" style="text-align: center">
            <td colspan="5" style="text-align: center;">暂无数据</td>
          </tr>
          
        </tbody>

        <tfoot v-if="list.length">
          <tr>
            <td colspan="5" style="text-align: right;">总价值:{{ getSum }} &nbsp; 平均价值:{{ getAvg }}</td>
          </tr>
        </tfoot>
      </table>



      <form class="form-inline">
        <div class="mb-3">
          <input  class="form-control" v-model="good.name" placeholder="资产名称">
        </div>
        <div class="mb-3">
          <input  class="form-control" v-model="good.price" placeholder="资产价值">
        </div>
        <div class="mb-3 form-check">
          <input type="checkbox" class="form-check-input" id="exampleCheck1">
          <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary" @click.prevent="addGoods">添加资产</button>
      </form>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import 'bootstrap/dist/css/bootstrap.css'
export default {
  data() {
    return {
      good: {
        name: '',
        price: '',
      },
      list: [
      { id: 1, name: "外套", price: 199, time: "2010-08-12" },
          { id: 2, name: "裤子", price: 34, time: "2013-09-01" },
          { id: 3, name: "鞋", price: 25.4, time: "2018-11-22" },
          { id: 4, name: "头发", price: 19900, time: "2020-12-12" },
          { id: 5, name: "帽子", price: 49.99, time: "2012-05-15" },
          { id: 6, name: "衬衫", price: 75, time: "2017-03-21" },
          { id: 7, name: "手套", price: 19.99, time: "2019-11-01" },
          { id: 8, name: "围巾", price: 59.99, time: "2016-12-25" },
          { id: 9, name: "袜子", price: 9.99, time: "2014-08-30" },
          { id: 10, name: "皮带", price: 39.99, time: "2015-07-04" }
      ]
    };
  },
  methods: {
    delGoods(index) {
      this.list.splice(index, 1);
      for(let i = 0; i < this.list.length; i++) {
        this.list[i].id = i+1;
      }
    },
    addGoods() {
      const {list, good} = this;
      const id = list.length+1;

      if(good.name == '' || good.price == '') return alert('输入有空,重新输入')
      let object = {
        id : id,
        name: good.name,
        price: good.price,
        time: dayjs(new Date()).format('YYYY-MM-DD')
      }
      list.push(object);

      good.name = ''
      good.price = ''
    }
  },
  computed: {
    getSum() {
      let sum = this.list.reduce((sum, item) => sum + item.price, 0)
      return parseFloat(sum).toFixed(2)
    },
    getAvg() {
      let avg = this.getSum
      avg /= this.list.length
      return parseFloat(avg).toFixed(2)
    }
  }
}
</script>

<style>

</style>


效果预览


在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2106673.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C语言进阶】C语言进阶教程:利用结构体、联合体和枚举自定义数据类型

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C语言 “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;C语言内存管理函数 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀C语言自定义类型 &#…

编译 ffmpeg 以支持AVS格式视频解码与解码

前言 当前文章介绍如何在Linux下使用FFmpeg转码其他视频格式到AVS格式的指南&#xff0c;包括编译FFmpeg以支持XAVS编码和如何使用FFmpeg进行转码。 AVS (Audio Video Coding Standard) 格式是一种由中国主导制定的视频编码标准&#xff0c;全称为“中国数字音视频编解码技术…

将星 x17 安装ubuntu 20.04 双系统

准备工作&#xff0c;包含关闭快速启动&#xff0c;关闭Secret Boot 1.进入控制面板选择小图标&#xff0c;找到电源选项 2.点击更改当前不可用的设置&#xff0c;关闭快速启动 3.开机启动时快速按F2&#xff0c;进入BIOS 4.选择Setup Utiltity&#xff0c;选择Security&#…

鲁大师8月新机性能/流畅/AI/久用榜:新机节奏放缓,但不乏小惊喜

虽说8月紧邻开学季&#xff0c;但机圈发布新机的节奏相较7月&#xff0c;明显放缓不少&#xff0c;或许是华为和苹果将在9月10日这天再次正面硬刚&#xff0c;让其他厂商感觉“亚历山大”&#xff0c;不冒险当出头鸟&#xff1b;亦或是各手机厂商正为骁龙8 Gen4和天玑9400新旗舰…

C++入门9——list的使用

目录 1.什么是list&#xff1f; 2.list的构造 3.list迭代器的使用&#xff08;list iterator&#xff09; 4.list capacity 5.list modifiers 6.list的其他操作 1.什么是list&#xff1f; 在官网中&#xff0c;对list有这样的介绍&#xff1a; Lists are sequence co…

如何在VSCODE中查看西门子PLC的SCL程序?

如何在VSCODE中查看西门子PLC的SCL程序? 首先,下载并安装VSCODE, 安装完成后,默认为英文界面,点击左侧扩展栏,搜索中文语言包,并点击安装,安装完成后会提示重启,重启之后就会显示中文, 同样,在扩展中搜索SCL插件包,并点击安装, 安装完成之后,可以新建一个文本文件…

在 Elastic 8.15 中使用最少的代码快速构建 RAG

作者&#xff1a;来自 Elastic Han Xiang Choong Elastic 8.15 已经发布&#xff0c;语义搜索比以往任何时候都更容易实现。 我们将介绍如何在 15 分钟内完成所有这些任务&#xff1a; 将你的文档存储在某些数据存储服务中&#xff0c;例如 AWS S3 Bucket设置 Elastic Search…

java项目docker部署时进行热部署

本文需要pontwiner进行配合操作 1.上传文件到对应服务器&#xff0c;可以通过xftp等文件上传工具进行文件上传 2.获取docker imagId XX为项目部署名称 例如&#xff1a;test-server docker ps -a |grep XX 3.复制文件到docker容器的/tmp目录下 docker cp XXXX.class im…

做seo要注意的各种细节,你都注意到了吗

在实施seo时&#xff0c;关注各种细节是至关重要的。 这些细节始于网站的初始设计&#xff0c;包括选择合适的主机、规划网站结构、优化网站内容&#xff0c;以及建立内部和外部链接的策略等。此外&#xff0c;确保网站对搜索引擎友好&#xff0c;涵盖从URL的设计到内容的优化…

kafka的安装和启动

一、kafka介绍 1&#xff0c;kafka简单介绍 kafka是一款分布式、支持分区的、多副本&#xff0c;基于zookeeper协调的分布式消息系统。最大的特性就是可以实时处理大量数据来满足需求。 2&#xff0c;kafka使用场景 1&#xff0c;日志收集&#xff1a;可以用kafka收集各种服务…

使用 Docker 部署和运行 RabbitMQ

使用 Docker 部署和运行 RabbitMQ 在本篇博客中&#xff0c;我将介绍如何通过 Docker 来运行 RabbitMQ 并使用其管理界面。还会讨论我在操作过程中遇到的常见问题及其解决方案。RabbitMQ 是一个开源的消息代理&#xff0c;用于跨应用程序发送、接收消息。在容器化环境中运行 R…

使用sysbench 简单测试io

sysbench最新版本地址 GitHub - akopytov/sysbench: Scriptable database and system performance benchmark centos在线安装 curl -s https://packagecloud.io/install/repositories/akopytov/sysbench/script.rpm.sh | sudo bash sudo yum -y install sysbench 查看sysben…

vue3+ts封装类似于微信消息的组件

组件代码如下&#xff1a; <!--聊天页面-播放语言组件--> <template><div:class"[voice-message, { sent: isSent, received: !isSent }]":style"{ backgroundColor: backgroundColor }"click"togglePlayback"><!-- isSen…

解析查看elf文件的构成

x86下用clang编译一段c代码&#xff0c;编译成elf文件&#xff0c;读elf文件&#xff0c;dump出里面的所有段&#xff0c;并打印出段中的数据和含义以及汇编的内容 编写C代码 首先&#xff0c;编写一个简单的C程序&#xff0c;例如命名为example.c&#xff1a; 使用Clang编…

【YOLOv5模型部署】——TensorRT推理引擎安装与使用基于Flask的项目部署

声明&#xff1a;笔记是做项目时根据B站博主视频学习时自己编写&#xff0c;请勿随意转载&#xff01; 温馨提示&#xff1a;对于我的电脑没有Nvidia的独显&#xff0c;只有Intel的集显&#xff0c;最后导出时无法识别Nvidia显卡设备&#xff01;&#xff01;就没成功&#xf…

Java小白一文讲清Java中集合相关的知识点(四)

LinkedList底层结构 LinkedList底层实现了双向链表和双向队列特点可以添加任意元素&#xff0c;包括null,元素可以重复线程不安全&#xff0c;没有实现同步 LinkedList底层操作机制 LinkedList底层维护了一个双向链表LinkedList中维护了两个属性first和last分别指向首结点和…

如何启动vue ui,快速创建vue项目

1.查看自己是否已经安装了vue3.0脚手架版本&#xff0c;打开cmd命令框输入vue -V(大写为查看&#xff0c;此处查看的是脚手架的版本)。如果没有提示版本&#xff0c;而是命令不存在...则要进行下面的1.1操作 1.1安装Vue CIL&#xff0c;如果已安装&#xff0c;此步忽略。安装完…

计算机毕业设计选题推荐-中华诗词文化交流平台-Java/Python项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

快速搭建和运行Spring Boot项目的简易指南

对于非Java开发的后端开发人员而言&#xff0c;即便未曾接触过Java&#xff0c;也可能听说过Spring Boot这一框架。若想要快速搭建并运行一个Spring Boot项目&#xff0c;可以遵循以下步骤&#xff1a; 环境准备 **安装Java JDK&#xff1a;**确保您的开发环境中安装了Java J…

Android Studio编译时各类型网络超时优化方案

我们国家有很多长城&#xff0c;我觉得最重要的除了大家耳熟能详的西起嘉峪关&#xff0c;东至山海关的万里长城&#xff0c;还有一个叫GFW的国家长城防火墙&#xff0c;这个防火墙起初仅是为了禁止用户访问政治敏感信息&#xff0c;后来逐渐强大。。。目前最新进展是我们已和世…