基于Vue的图书管理系统

框架代码

<div id="app">
        <div class="table-c">
                <div>
                    <h1 class="h1">图书管理系统</h1>
                    <div class="book">
                        <div>
                            <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>
                <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}}</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>
    </div>

添加图书

handle:function(){
                    if(this.flag){
                        //编辑操作
                        //根据当前的id去更新数组中对应的数据
                        this.books.some((item) => {
                            if(item.id == this.id)
                            item.name = this.name;
                            //完成更新操作后需要终止循环
                            return true
                        });
                        this.flag = false;
                    }else{
                        //添加
                        //添加图书
                        var book = {}
                        book.id = this.id;
                        book.name = this.name;
                        book.date = new Date();
                        this.books.push(book);
                        //清空表单
                        this.id = ;
                        this.name = ;
                    }
                    this.id = ;
                    this.name = ;
                },

修改图书

toEdit:function(id){
                    //禁止修改id
                    this.flag = true;
                    console.log(id);
                    //根据ID查询出要编辑的数据
                    var book = this.books.filter(function(item){
                        return item.id == id;
                    });
                    console.log(book);
                    // 把获取到的信息填充到表单
                    this.id = book[0].id;
                    this.name = book[0].name;
                },

删除图书

deleteBook:function(id){
                    // 删除图书
                    // 根据id从数组中查找元素的索引
                    var index = this.books.findIndex(function(item){
                        return item.id == id;
                    });
                    //根据索引删除数组元素
                    this.books.splice(index,1);
                },
            },