vue实现图书管理系统

本文实例为大家分享了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>

过滤器文件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'

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 vue实现图书管理系统 的全部内容, 来源链接: utcz.com/p/238772.html

回到顶部