vue實現圖書管理系統

<template>
 <div id="app">
  <div class="grid">
   <div>
    <h1>圖書管理</h1>
    <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>

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)
});

import './filters'