Vue——简易图书管理系统（三）
步骤1.提供静态数据2.把提供的数据渲染到页面上3.添加图书4.修改图书5.删除图书代码<html lang="en"><head><meta charset="UTF-8"><title>vue图书管理系统</title><style type="text/css">.grid {margin: auto;width: 53
·
步骤
1.提供静态数据
2.把提供的数据渲染到页面上
3.添加图书
4.修改图书
5.删除图书
代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue图书管理系统</title>
<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: 10;
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>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
var vm = new Vue({
el: "#app",
data: {
id: '',
name: '',
btnFlag: false, //按钮属性
iptFlag: false, //输入框属性
subName:"添加", //添加按钮
books: [{
id: 1,
name: '数据结构',
date: '2020-10-01 00:00:00'
}, {
id: 2,
name: '算法分析与设计',
date: '2020-11-01 00:00:00'
}, {
id: 3,
name: '大话设计模式',
date: '2020-12-01 00:00:00'
}, {
id: 4,
name: 'Java编程思想',
date: '2020-07-01 00:00:00'
}]
},
methods: {
//添加按钮事件
save() {
//根据输入框属性值判断是添加还是修改
if (this.iptFlag) {
//箭头函数this指向父级作用域的this
this.books.some((item) => {
if (item.id == this.id) {
item.name = this.name;
//完成更新操作，终止循环
return true;
}
})
//不禁用输入框
this.iptFlag = false;
} else {
//定义一个新的book对象
var book = {};
book.id = this.id;
book.name = this.name;
book.date = '2020-12-04 00:00:00';
//判空
if (this.id != '' && this.name != '') {
//把book通过push放到books里面
this.books.push(book);
}
}
//清空输入框
this.id = '';
this.name = '';
this.subName = "添加";
},
//修改按钮事件
edit(id) {
//根据id查询当前的书籍
var book = this.books.filter(function(item) {
return item.id == id;
})
//给输入框赋值
this.id = book[0].id;
this.name = book[0].name;
//禁用输入框
this.iptFlag = true;
this.subName = "修改";
},
//删除按钮事件
deleteBook(id) {
//重新给books赋值
this.books = this.books.filter(function(item) {
return item.id != id;
})
},
},
// 监听id输入框
watch: {
id: function(val) {
//增加时id重复禁用按钮，修改不禁用
if(this.iptFlag == false){
this.btnFlag = this.books.some(function(item) {
return item.id == val;
})
}
}
},
//计算属性图书的数量
computed: {
total() {
return this.books.length;
}
}
})
})
</script>
</head>
<body>
<!-- 防止页面闪烁 -->
<div id="app" v-cloak>
<div class="grid">
<div>
<h1>图书管理</h1>
<div class="book">
<div>
<label for="id">
编号：
</label>
<!-- 绑定id 绑定disabled属性-->
<input type="text" id="id" v-model.lazy="id" :disabled="iptFlag">
<label for="name">
名称：
</label>
<!-- 绑定name -->
<input type="text" id="name" v-model="name">
<!-- 给按钮添加点击事件 -->
<button @click="save" :disabled="btnFlag">{{subName}}</button>
</div>
</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 v-for="item in books" :key='item.id'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>
<!-- 阻止a标签的默认跳转 -->
<a href="" @click.prevent='edit(item.id)'>修改</a>
<span>|</span>
<a href="" @click.prevent='deleteBook(item.id)'>删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)