vue项目 / 资产管理

2024-09-05 09:44

本文主要是介绍vue项目 / 资产管理,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

参考: 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.getSumavg /= this.list.lengthreturn parseFloat(avg).toFixed(2)}}
}
</script><style></style>


效果预览


在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

这篇关于vue项目 / 资产管理的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1138610

相关文章

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于

SpringBoot项目使用MDC给日志增加唯一标识的实现步骤

《SpringBoot项目使用MDC给日志增加唯一标识的实现步骤》本文介绍了如何在SpringBoot项目中使用MDC(MappedDiagnosticContext)为日志增加唯一标识,以便于日... 目录【Java】SpringBoot项目使用MDC给日志增加唯一标识,方便日志追踪1.日志效果2.实现步

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

nvm如何切换与管理node版本

《nvm如何切换与管理node版本》:本文主要介绍nvm如何切换与管理node版本问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录nvm切换与管理node版本nvm安装nvm常用命令总结nvm切换与管理node版本nvm适用于多项目同时开发,然后项目适配no