Vue实现图书管理小案例
(编辑:jimmy 日期: 2024/11/24 浏览:3 次 )
本文实例为大家分享了Vue实现图书管理的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .grid{ margin:auto; width:500px; text-align:center; } .grid table{ width:100%; border-collapse:collapse; } .grid th,td{ padding:10px; border:1px solid orange; height:35px; line-height:35px; } .grid th{ background-color:orange; } .book{ background-color:orange; border-bottom:1px solid #ccc; padding:5px; } input{ width:150px; outline:none; } .grid .total{ height:30px; line-height:30px; background-color:orange; border-bottom:1px solid #ccc; } </style> </head> <body> <div id="app"> <div class="grid"> <div> <h1>图书管理</h1> <div class="book"> <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 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> <script src="/UploadFiles/2021-04-02/vue.js">以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:基于ajax实现上传图片代码示例解析