Vue综合实例——图书管理（2）

最新推荐文章于 2025-04-25 16:22:17 发布

别影响我打怪

最新推荐文章于 2025-04-25 16:22:17 发布

阅读量425

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript html5

本文链接：https://blog.youkuaiyun.com/weixin_43370373/article/details/118765446

版权

本文详细介绍了如何使用Vue.js实现图书管理功能，包括图书列表的显示、添加、删除和修改操作。通过事件修饰符如@click.prevent阻止默认行为，利用Vue的数据绑定和数组方法如push和filter处理业务逻辑。此外，还探讨了表单数据处理和数组元素删除的两种不同策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图书列表
图书增加
图书删除
图书修改

事件修饰符

 .stop 阻止冒泡，调用 event.stopPropagation()
 .prevent 阻止默认行为，调用 event.preventDefault()
 .capture 添加事件侦听器时使用事件捕获模式
 .self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
 .once 事件只触发一次

要实现本实例，在掌握vue基本特性以及数组的知识以后，下面来实现一下具体功能。

图书列表
[1] 实现静态列表效果
[2] 基于数据实现模板效果
[3] 处理每行的操作按钮
@click.prevent 阻止事件的默认行为，阻止标签跳转

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .grid {
     
      margin: auto;
      width: 500px;
      text-align: center;
    }

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

    .grid th,
    td {
     
      padding: 10;
      border: 1px dashed rgb(0, 255, 149);
      height: 35px;
      line-height: 35px;
    }

    .grid th {
     
      background-color: rgb(0, 255, 149);
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="grid">
      <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}}</td>
            <td>
              <a href="" @click.prevent>修改</a>
              <span>|</span>
              <a href="" @click.prevent>删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script type="text/javascript">
    /*
      图书管理-图书列表展示功能
      注意事项：<a href="" @click.prevent>修改</a>
      事件绑定时，可以只添加修饰符，而不绑定事件函数
    */
    var vm = new Vue({
     
      el: '#app',
      data: {
     
        books: [{
     
          id: 1,
          name: '哆啦A梦',
          date: ''
        }, {
     
          id: 2,
          name: '海贼王',
          date: ''
        }, {
     
          id: 3,
          name: '狐妖小红娘',
          date: ''
        }, {
     
          id: 4,
          name: '完美世界',
          date: ''
        }]
      }
    });
  </script>
</body>

</html>

添加图书

[1] 实现表单的静态效果
[2] 添加图书表单域数据绑定
[3] 添加按钮事件绑定
[4] 实现添加业务逻辑
实现以下效果：

核心就是：把表单中的数据封装到一个对象当中，然后把对象利用数组的push方法添加到数组中，数组中数据变化，页面随之会发生变化。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .grid {
     
      margin: auto;
      width: 530px;
      text-align: center;
    }

    .grid table {
     
      border-top: 1px solid #C2D89A;
      width: 100%;
      border-collapse: collapse;
    }

    .grid th,
    td {
     
      padding: 10;
      border: 1px dashed #abf3cb;
      height: 35px;
      line-height: 35px;
    }

最低0.47元/天解锁文章