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 图书管理案例的主要内容，如果未能解决你的问题，请参考以下文章