组件代码
<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="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'
