Vue实现图书管理案例

(编辑：jimmy 日期: 2025/10/24 浏览：3 次 )

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

案例效果

案例思路

1、图书列表

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

2、添加图书

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

3、修改图书

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

4、删除图书

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

5、常用特性应用场景

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

代码

基本样式

<style type="text/css">
    .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;
    }
</style>

静态布局

<div id="app">
    <div class='grid'>
      <div>
        <h1>图书管理</h1>
        <div class="book">
          <div>
            <label for='id'>
              编号：
            </label>
            <input type="text" id="id" v-model='id' :disabled='flag' v-focus>
            <label for="name">
              名称：
            </label>
            <input type="text" id='name' v-model='name'>
            <button @click='handle' :disabled='submitFlag'>提交</button>
          </div>
        </div>
      </div>
      <div class='total'>
        <span>图书总数：</span><span>{{total}}</span>
      </div>
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>名称</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr :key="item.id" v-for="item in books">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.date | format('yyyy-MM-dd hh:MM:ss')}}</td>
            <td><a href="" @click.prevent='toEdit(item.id)'>修改</a>
              <span>|</span>
              <a href="" @click.prevent='deleteBook(item.id)'>删除</a>
            </td>
          </tr>

        </tbody>
      </table>
    </div>
</div>

效果实现

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

上一篇：node脚手架搭建服务器实现token验证的方法
下一篇：Nodejs 微信小程序消息推送的实现