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

相关文章

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

springboot项目如何开启https服务

《springboot项目如何开启https服务》:本文主要介绍springboot项目如何开启https服务方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录springboot项目开启https服务1. 生成SSL证书密钥库使用keytool生成自签名证书将

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Spring 基于XML配置 bean管理 Bean-IOC的方法

《Spring基于XML配置bean管理Bean-IOC的方法》:本文主要介绍Spring基于XML配置bean管理Bean-IOC的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一... 目录一. spring学习的核心内容二. 基于 XML 配置 bean1. 通过类型来获取 bean2. 通过

将Java项目提交到云服务器的流程步骤

《将Java项目提交到云服务器的流程步骤》所谓将项目提交到云服务器即将你的项目打成一个jar包然后提交到云服务器即可,因此我们需要准备服务器环境为:Linux+JDK+MariDB(MySQL)+Gi... 目录1. 安装 jdk1.1 查看 jdk 版本1.2 下载 jdk2. 安装 mariadb(my

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的