<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入bootstrap.min.css样式表,本例中css文件和本页面在同一个路径下 --> <link rel="stylesheet" href="bootstrap.min.css"> <script src="vue.js"></script> </head> <body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h2>图书管理系统</h2> </div> <div class="panel-body form-inline"> <label>id: </label><input type="text" class="form-control" v-model="id" disabled> <label>name: </label><input type="text" class="form-control" v-model="name" onchange="onchange(id)"> <input type="button" value="添加" class="btn btn-primary" @click. ="add" :disable="isEditable"> </div> <table class="table table-bordered table-hover"> <thead> <tr> <td>id</td> <td>name</td> <td>time</td> </tr> </thead> <tbody> <tr v-for="book in books" :key="book.id"> <td>{{book.id}}</td> <td>{{book.name}}</td> <td>{{book.time}}</td> <td><a href="" onclick.prevent="del(book.id)" >删除</a></td> </tr> </tbody> </table> </div> </div> <script src="vue.js"></script> <script> let app = new Vue({ el: '#app', data: { id:0, name:'', books:[ {'id':1,'name':'Vue.js入门','time':new Date()} ], isEditable:true }, mounted(){ this.id=this.books.length+1 console.log(this.id) }, method:{ onchange(){ if (this.name!=''){ this.isEditable=false }else{ this.isEditable=true } }, add(){ this.books.push({'id':this.id,'name':this.name,'time':new Date()}) this.id++ this.name='' }, del(id){ let index=this.books.findIndex((item)=>{ if(item.id==id){ return true } }) this.books.splice(index,1) } } }) </script> </body> </html> 补充代码
时间: 2023-08-14 13:50:03 浏览: 190
-doctype-html-html-lang-en-dir-ltr-head-meta-name:
这段代码是一个简单的图书管理系统的前端页面,使用了Vue.js框架进行开发。其中包含了一个表单,用于添加新书籍,以及一个表格,用于展示已有的书籍信息,并可以进行删除操作。
需要补充的代码:
1. 引入Vue.js和bootstrap.min.css样式表的文件路径。
2. 在mounted()钩子函数中,将id初始化为books数组长度加1,保证每次添加新书籍时id的自增。
3. 在method对象中,添加onchange()、add()和del()三个方法,分别用于判断表单是否为空、添加新书籍和删除指定书籍。需要注意的是,@click和:disabled属性中的点号都是错误的,需要更正为"."。
阅读全文