【vue详细笔记】vue实现图书管理

最新推荐文章于 2024-06-16 23:23:41 发布

lybinWeb

最新推荐文章于 2024-06-16 23:23:41 发布

阅读量2.9k

点赞数 4

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

本文链接：https://blog.csdn.net/Lyb__/article/details/109461076

版权

vue实现图书管理

文章目录

vue实现图书管理

一、效果展示

二、具体实现

1、图书列表部分

html：

<!-- 图书容器 -->
<div class="grid">
    <table>
        <!-- 标题头部 -->
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <!-- 内容 -->
        <tbody>
			<tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
    		</tr>
        </tbody>
    </table>
</div>

css：

<style>
        *{
   
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .grid {
   
            margin:100px auto;
            width: 500px;
            text-align: center;
        }
        .grid table {
   
            width: 100%;
            border-collapse: collapse;
        }
        .grid th {
   
            background-color: lightpink;
        }
        .grid td,td,th{
   
            padding: 10px;
            border: 1px dashed orange;
            /* background-color: coral; */
            height: 35px;
            line-height