vue图书馆demo

<style type="text/css" lang='less' scoped>
  .grid {
    margin: auto; width: 530px; text-align: center;
    table {
        border-top: 1px solid #C2D89A; width: 100%; border-collapse: collapse;
        th,td {padding: 10px; border: 1px dashed #F3DCAB; height: 35px; line-height: 35px;}
        th {background-color: #F3DCAB;}
      }
    .book {padding-bottom: 10px;padding-top: 5px;background-color: #F3DCAB;}
    .total {
      height: 30px;line-height: 30px;background-color: #F3DCAB;border-top: 1px solid #C2D89A;}
    }
</style>
<template>
  <div id="app">
    <div class="grid">
      <div>
        <h1>图书管理Demo</h1>
        <div class="book">
          <div>
            <label for="id"> 编号：</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="submit(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" :key="book.id">
          <td> {{ book.id }} </td>
          <td> {{ book.name }} </td>
          <td> {{ book.date }} </td>
          <td>
            <a href="" @click.prevent="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: '',
      name: '',
      flag: false,  // id输入框是否可修改标识
      addOrUpdate: 0  // 0代表添加  1代表修改
    }
  },
  created()
  {
    let bookList = [
      {id: 1, name: '三国演义', date: '2022/1/20'},
      {id: 2, name: '水浒传', date: '2022/1/20'},
      {id: 3, name: '红楼梦', date: '2022/1/20'},
      {id: 4, name: '西游记', date: '2022/1/20'}
    ]
    let books = localStorage.getItem('books')
    if (!books)
      localStorage.setItem('books', JSON.stringify(bookList))
    else
      this.books = JSON.parse(books)
  },
  computed: {
    totalNum()
    {
      return this.books.length
    }
  },
  methods:
  {
    /**
     * add or update
     */
    submit()
    {
      if (this.addOrUpdate === 0)
      {
        // 添加图书
        if (!this.id)
          return this.$showMsg('请输入编号', 'warning')
        if (!this.name)
          return this.$showMsg('请输入图书名', 'warning')
        let exits = this.books.filter(item => item.name === this.name)[0]
        if (exits)
          return this.$showMsg('该图书已存在', 'warning')
        this.books.push({id: this.id, name: this.name, date: new Date().toLocaleString()})
        localStorage.setItem('books', JSON.stringify(this.books))
      }
      else
      {
        const book = this.books.filter(book => book.id === this.id)
        book[0].name = this.name
        localStorage.setItem('books', JSON.stringify(this.books))
      }
      // 添加之后清空input框
      this.id = ''
      this.name = ''
      this.flag  = false
    },
    // 更新图书的方法
    updateBook(id)
    {
      this.addOrUpdate = 1
      // 需要修改的当前图书信息
      const book = this.books.filter(book => book.id === id)
      // 让input框显示相应内容
      this.id = book[0].id
      this.name = book[0].name
      this.flag = true
    },
    /**
     * 删除功能
     */
    deleteBook(id)
    {
      this.books = this.books.filter(item => item.id !== id)
      localStorage.setItem('books', JSON.stringify(this.books))
    }
  }

}
</script>