Vue实现图书管理案例

本文实例为大家分享了Vue实现图书管理的具体代码，供大家参考，具体内容如下

案例效果

案例思路

1、图书列表

• 实现静态列表效果
• 基于数据实现模板效果
• 处理每行的操作按钮
  

2、添加图书

• 实现表单的静态效果
• 添加图书表单域数据绑定
• 添加按钮事件绑定
• 实现添加业务逻辑
  

3、修改图书

• 修改信息填充到表单
• 修改后重新提交到表单
• 重用添加和修改方法
  

4、删除图书

• 删除按钮绑定时间处理方法
• 实现删除业务逻辑
  

5、常用特性应用场景

• 过滤器（格式化日期）
• 自定义指令（获取表单焦点）
• 计算属性（统计图书数量）
• 侦听器（验证图书和编号的存在性）
• 生命周期（图书数据处理）
  

代码

基本样式

    .grid {
      margin: auto;
      width: 550px;
      text-align: center;
    }

    .grid table {
      width: 100%;
      border-collapse: collapse;
    }

    .grid th,
    td {
      padding: 10;
      border: 1px dashed orange;
      height: 35px;
    }

    .grid th {
      background-color: orange;
    }

    .grid .book {
      width: 550px;
      padding-bottom: 10px;
      padding-top: 5px;
      background-color: lawngreen;
    }

    .grid .total {
      height: 30px;
      line-height: 30px;
      background-color: lawngreen;
      border-top: 1px solid orange;
    }

静态布局

    
      
 图书管理
 
   
     
编号：
     
     
     
名称：
     
     
     提交
   
 
      
      
 图书总数：{{total}}
      
      

 

   

     
编号
     
名称
     
时间
     
操作
   
 
 

   

     
{{item.id}}
     
{{item.name}}
     
{{item.date | format('yyyy-MM-dd hh:MM:ss')}}
     
修改
|
删除
     
   

 
      
    

效果实现

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。