使用vue怎么開發(fā)一個(gè)圖書管理系統(tǒng)？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)是一家成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)，提供網(wǎng)頁(yè)設(shè)計(jì)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，建網(wǎng)站，按需網(wǎng)站建設(shè)，網(wǎng)站開發(fā)公司，自2013年起是互聯(lián)行業(yè)建設(shè)者，服務(wù)者。以提升客戶品牌價(jià)值為核心業(yè)務(wù)，全程參與項(xiàng)目的網(wǎng)站策劃設(shè)計(jì)制作，前端開發(fā)，后臺(tái)程序制作以及后期項(xiàng)目運(yùn)營(yíng)并提出專業(yè)建議和思路。

組件代碼

<template>
 <div id="app">
  <div class="grid">
   <div>
    <h2>圖書管理</h2>
    <div class="book">
     <div>
      <label for="id" v-focus>
       編號(hào)：
      </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>圖書總數(shù)：</span>
    <span>{{ totalNum }}</span>
   </div>
   <table>
    <thead>
    <tr>
     <th>編號(hào)</th>
     <th>名稱</th>
     <th>時(shí)間</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: '三國(guó)演義',
           date: 2525609975000
         },
         {
           id: 2,
           name: '水滸傳',
           date: 2525609975000
         },
         {
           id: 3,
           name: '紅樓夢(mèng)',
           date: 2525609975000
         },
         {
           id: 4,
           name: '西游記',
           date: 2525609975000
         }
          ],
       id:'',
       name:'',
       flag:false, // id輸入框是否可修改標(biāo)識(shí)
       addOrUpdate: 0, // 0代表添加 1代表修改
       subFlag:false, // 提交按鈕是否禁用（圖書存在時(shí)禁用）

     }
   },

    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;
       // 需要修改的當(dāng)前圖書信息
       const book = this.books.filter((book)=>{
         return book.id === id;
       });

       // 讓input框顯示相應(yīng)內(nèi)容
       this.id = book[0].id;
       this.name = book[0].name;
       this.flag = true;

      },
      deleteBook(id){
       // 獲取當(dāng)前圖書的索引
       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){
         // 自動(dòng)聚焦
         el.focus()
       }
     }
    },

    // 監(jiān)視圖書是否存在
    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'

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。

網(wǎng)站題目：使用vue怎么開發(fā)一個(gè)圖書管理系統(tǒng)-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)路徑：http://jinyejixie.com/article44/djcghe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、服務(wù)器托管、網(wǎng)站改版、標(biāo)簽優(yōu)化、全網(wǎng)營(yíng)銷推廣、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)