Vue 图书管理案例
Posted 拿红罗卜钓鱼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 图书管理案例相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
<style>
.grid {
margin: auto;
width: 600px;
text-align: center;
}
.grid table {
border-top: 1px solid #fff;
width: 100%;
border-collapse: collapse;
}
.grid th,
td {
padding: 10px;
border: 1px dashed #F3DCAB;
height: 35px;
line-height: 35px;
}
.grid th {
background-color: #F3DCAB;
}
a {
text-decoration: none;
}
.book {
background-color: #F3DCAB;
padding: 5px 0;
}
.grid .total {
height: 30px;
line-height: 30px;
background-color: #F3DCAB;
border-top: 1px solid #fff;
}
</style>
</head>
<body>
<div id="app">
<div class="grid">
<div>
<h1>图书管理</h1>
<div class="book">
<label for="id">编号：</label>
<input type="text" id="id" v-model='id' :disabled='flag' v-focus>
<label for="id">名称：</label>
<input type="text" id="name" v-model='name'>
<button @click='handle' :disabled='submitFlag'>提交</button>
</div>
</div>
<div class="total">
<span>图书总数：</span>
<span>{{total}}</span>
</div>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key='item.id' v-for='(item,index) in books'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date|format}}</td>
<td>
<a href="" @click.prevent='toEdit(item.id)'>修改</a>
<span> | </span>
<a href="" @click.prevent='deleteBook(item.id)'>删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
id: '',
name: '',
flag: false,
submitFlag: false,
books: '',
},
methods: {
handle() {
// 判断是否为编辑模式
if (this.flag) {
// 根据当前的id更新数组中对应的数据
this.books.forEach(item => {
if (item.id == this.id) {
item.name = this.name;
return;
}
});
this.flag = false;
} else {
// 添加图书
let book = {};
book.id = this.id;
book.name = this.name;
book.date = '';
this.books.push(book);
}
// 清空表单
this.id = '';
this.name = '';
},
toEdit(id) {
// 禁止改变id
this.flag = true;
// 根据id查询要编辑的数据
let book = this.books.filter(item => {
return item.id == id;
});
// 把获取的信息填充表单
this.id = book[0].id;
this.name = book[0].name;
},
// 删除图书
deleteBook(id) {
// 根据id查询要删除的数据的索引
// 通过数组的filter方法进行删除
this.books = this.books.filter(item => {
// 排除掉id不等于books.id中的项
return item.id !== id;
});
}
},
filters: {
format(value) {
let date = new Date(Number(value));
let year = date.getFullYear();
let month = date.getMonth() + 1;
if (month < 10) {
month = `0${month}`;
}
let day = date.getDate();
if (day < 10) {
day = `0${day}`;
}
return `${year}-${month}-${day}`;
}
},
// 自定义指令
directives: {
focus: {
inserted(el) {
el.focus();
}
}
},
computed: {
total() {
// 计算图书总数
return this.books.length;
}
},
watch: {
name: function (val) {
// 验证图书名称是否已经存在
this.submitFlag = this.books.some(item => {
// 如果存在则为真，将submitflag等于true
return item.name == val;
})
}
},
// 该声明周期钩子函数被触发时，模板已经可以使用了
// 一般此时用于获取后台数据，然后将数据填充到模板
mounted() {
var data = [
{
id: 1,
name: '三国演义',
date: '1291177600000',
flag: false
},
{
id: 2,
name: '水浒传',
date: '1344408000000'
},
{
id: 3,
name: '红楼梦',
date: '1623456000000'
},
{
id: 4,
name: '西游记',
date: '596851200000'
}];
this.books = data;
},
})
</script>
</body>
</html>
效果如下：
以上是关于Vue 图书管理案例的主要内容，如果未能解决你的问题，请参考以下文章