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

使用vue实现图书后台管理

使用工具：HBuild X，真的是一款超实用的软件

进入主题

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/