使用vue怎么开发一个图书管理系统

使用vue怎么开发一个图书管理系统？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

组件代码

<template>  <div id="app">   <div class="grid">    <div>     <h2>图书管理</h2>     <div class="book">      <div>       <label for="id" v-focus>        编号：       </label>       <input type="text" id="id" v-model="id" :disabled="flag">       <label for="name">        名称：       </label>       <input type="text" id="name" v-model="name">       <button @click="add(addOrUpdate)" :disabled="subFlag">提交</button>      </div>     </div>    </div>    <div class="total">     <span>图书总数：</span>     <span>{{ totalNum }}</span>    </div>    <table>     <thead>     <tr>      <th>编号</th>      <th>名称</th>      <th>时间</th>      <th>操作</th>     </tr>     </thead>     <tbody>     <tr v-for="book in books">      <td> {{ book.id }} </td>      <td> {{ book.name }} </td>      <td> {{ book.date | date-format }} </td>      <td>       <a href="" @click.prevent=" rel="external nofollow" updateBook(book.id)">修改</a>       <span>|</span>       <a href="" @click.prevent = 'deleteBook(book.id)'>删除</a>      </td>     </tr>     </tbody>    </table>   </div>  </div> </template> <script>   export default {    data(){      return{        books:[          {            id: 1,            name: '三国演义',            date: 2525609975000          },          {            id: 2,            name: '水浒传',            date: 2525609975000          },          {            id: 3,            name: '红楼梦',            date: 2525609975000          },          {            id: 4,            name: '西游记',            date: 2525609975000          }           ],        id:'',        name:'',        flag:false, // id输入框是否可修改标识        addOrUpdate: 0, // 0代表添加 1代表修改        subFlag:false, // 提交按钮是否禁用（图书存在时禁用）      }    },     methods:{      // 添加图书的方法      add() {        if(this.addOrUpdate===0){          // 添加图书          this.books.push({            id: this.id,            name: this.name,            date: new Date()          });        }else{          const book = this.books.filter((book)=>{            return book.id === this.id;          });          book[0].name = this.name        }       // 添加之后清空input框        this.id = '';        this.name = '';        this.flag = false      },       // 更新图书的方法       updateBook(id){         this.addOrUpdate = 1;        // 需要修改的当前图书信息        const book = this.books.filter((book)=>{          return book.id === id;        });        // 让input框显示相应内容        this.id = book[0].id;        this.name = book[0].name;        this.flag = true;       },       deleteBook(id){        // 获取当前图书的索引        const index = this.books.findIndex((book)=>{          return book.id === id        });        this.books.splice(index, 1)       }     },     computed:{       totalNum(){         return this.books.length       }     },     // 自定义局部指令     directives:{      focus:{        inserted(el){          // 自动聚焦          el.focus()        }      }     },     // 监视图书是否存在     watch:{      name:{        deep:true,        handler(val){          const book = this.books.find((book)=>{            return book.name === val          });          if(book){            this.subFlag = true          }else{            this.subFlag = false          }        }      }     }   } </script> <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: 10px;   border: 1px dashed #F3DCAB;   height: 35px;   line-height: 35px;  }  .grid th {   background-color: #F3DCAB;  }  .grid .book {   padding-bottom: 10px;   padding-top: 5px;   background-color: #F3DCAB;  }  .grid .total {   height: 30px;   line-height: 30px;   background-color: #F3DCAB;   border-top: 1px solid #C2D89A;  } </style>

过滤器文件index.js

import Vue from 'vue' import format from 'date-fns/format' // 自定义过滤器 Vue.filter('date-format', function (value, formatStr='yyyy-MM-dd HH:mm:ss') {  return format(value, formatStr) });

main.js引入

import './filters'

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。