Vue学习（二十六）——综合案例：图书管理（一）

最新推荐文章于 2023-07-16 17:38:16 发布

云中、漫步

最新推荐文章于 2023-07-16 17:38:16 发布

阅读量1.5k

点赞数 1

分类专栏： Vue学习

本文链接：https://blog.csdn.net/weixin_44075963/article/details/108930732

版权

一、图书列表的展示功能

1、实现静态列表效果

静态列表效果不过多赘述，使用提供的一个模板

2、基于数据实现模板效果

这里我们用v-for、差值表达式等基于数据实现模板效果

3、处理每行的操作按钮

行里面的操作按钮我们使用a标签来完成，不过，这里的a标签不进行跳转，所以我们使用事件修饰符.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 orange;
            height: 35px;
            line-height: 35px;
        }
        .grid th {
    
            background-color: orange;
        }
    </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 type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    /*
      图书管理-图书列表展示功能
      注意事项：<a href="" @click.prevent>修改</a>
      事件绑定时，可以只添加修饰符，而不绑定事件函数
    */
    var vm = new Vue({
    
        el: '#app',
        data: {
    
            books: [{
    
                id: 1,
                name: '三国演义',
                date: ''
            },{
    
                id: 2,
                name: '水浒传',
                date: ''
            },{
    
                id: 3,
                name: '红楼梦',
                date: ''
            },{
    
                id: 4,
                name: '西游记',
                date: ''
            }]
        }
    });
</script>
</body>
</html>

效果如下：
在这里插入图片描述

二。添加图书

这里实现的效果如下：
在这里插入图片描述
添加一个表单，点击提交的时候新增图书。

1、实现表单的静态效果

效果如下：

在这里插入图片描述

2、添加图书表单域数据绑定

不再赘述

3、添加按钮事件绑定

4、实现添加业务逻辑

此步骤完成后具体代码如下：

<!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 orange;
            height: 35px;
            line-height: 35px;
        }

        .grid th {
    
            background-color: #F3DCAB;
        }

        .grid .book {