博客
关于我
vue小项目实现后台管理
阅读量:526 次
发布时间:2019-03-08

本文共 1706 字,大约阅读时间需要 5 分钟。

使用vue实现图书后台管理

使用工具:HBuild X,真的是一款超实用的软件

附上下载地址:
新建项目
在这里插入图片描述
这就是为什么用这款软件的好处了,脚手架之类的环境以及其他插件,里面都设置好了

进入主题

css文件:

table{   	border: 1px solid #e9e9e9;	width: 500px;	border-collapse: collapse;	border-spacing: 0;}th,td{   	padding: 8px,16px;	border: 1px solid #e9e9e9;	text-align: align;}th{   	background-color: #f7f7f7;	color: #0000ff;	font-weight: 600;}

.js文件

const app = new Vue({   	el:'#app',	data:{   		books:[			{   			id:1,			name:'《算法导论》',			date:'2020-4',			price:85.00,			count:1			},			{   			id:2,			name:'《Linux编程技术》',			date:'2018-2',			price:59.00,			count:1			},			{   			id:3,			name:'《深入理解java虚拟机》',			date:'2019-9',			price:95.00,			count:1			},			{   			id:4,			name:'《编程大全》',			date:'2015-9',			price:89.00,			count:1			}		]	},	methods:{   		increment(index){   			this.books[index].count++;		},		discrement(index){   			this.books[index].count--;		},		removeBooks(index){   			/* 因为下标值比id刚好小1 */			this.books.splice(index,1);		}	},	computed:{   		totalPrice(){   			let sum = 0;			for (var i = 0; i < this.books.length; i++) {   				sum = sum + this.books[i].count * this.books[i].price;			}			return sum;		}	}})

最终的html文件

			
书籍名称 出版日期 价格 购买数量 操作
{ { i.id}} { { i.name}} { { i.date}} { { i.price}} { { i.count}}

总价格为:{ { totalPrice}}

订单为空

最终的页面

在这里插入图片描述
全部删除后的页面
在这里插入图片描述

把这个写完,这个vue的基础语法就能过关了

另外:赠人玫瑰,手留余香

该小管理系统的出处来自:

转载地址:http://fahnz.baihongyu.com/

你可能感兴趣的文章
mysql中kill掉所有锁表的进程
查看>>
mysql中like % %模糊查询
查看>>
MySql中mvcc学习记录
查看>>
mysql中null和空字符串的区别与问题!
查看>>
MySQL中ON DUPLICATE KEY UPDATE的介绍与使用、批量更新、存在即更新不存在则插入
查看>>
MYSQL中TINYINT的取值范围
查看>>
MySQL中UPDATE语句的神奇技巧,让你操作数据库如虎添翼!
查看>>
Mysql中varchar类型数字排序不对踩坑记录
查看>>
MySQL中一条SQL语句到底是如何执行的呢?
查看>>
MySQL中你必须知道的10件事,1.5万字!
查看>>
MySQL中使用IN()查询到底走不走索引?
查看>>
Mysql中使用存储过程插入decimal和时间数据递增的模拟数据
查看>>
MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
查看>>
mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
查看>>
mysql中出现Unit mysql.service could not be found 的解决方法
查看>>
mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
查看>>
Mysql中各类锁的机制图文详细解析(全)
查看>>
MySQL中地理位置数据扩展geometry的使用心得
查看>>
Mysql中存储引擎简介、修改、查询、选择
查看>>
Mysql中存储过程、存储函数、自定义函数、变量、流程控制语句、光标/游标、定义条件和处理程序的使用示例
查看>>