使用vue实现简单的图书管理
这个小案例巩固了vue的基础知识,主要涉及了各种指令的操作,自定义指令、生命周期、侦听器、过滤器、计算属性等的实践。完成的功能有对图书的增删改和统计图书的总量。功能介绍:添加图书:输入编号和名称点击提交按钮即可添加图书,这里在名称表单中有一个监听器(name),如果名称相同提交按钮就失效,主要是使用数组的push()方法;修改图书:点击修改按钮将图书的信息填充到表单中,但是编号不能修改,使用dis
·
这个小案例巩固了vue的基础知识,主要涉及了各种指令的操作,自定义指令、生命周期、侦听器、过滤器、计算属性等的实践。完成的功能有对图书的增删改和统计图书的总量。
功能介绍:
- 添加图书:输入编号和名称点击提交按钮即可添加图书,这里在名称表单中有一个监听器(name),如果名称相同提交按钮就失效,主要是使用数组的
push()
方法; - 修改图书:点击修改按钮将图书的信息填充到表单中,但是编号不能修改,使用
disabled=‘true’
来使其失效,然后修改名称之后再点击提交进行修改。将数据填充到表单使用数组的filter()
方法,然后使用some()
方法来对数组进行遍历,修改指定索引的图书信息; - 删除图书:方法一是通过获取删除图书的id来进行删除,使用的是数组的
findIndex()
方法,再使用splice()
方法进行删除;方法二通过数组的filter()
方法来进行过滤。 - 自定义指令:使用
Vue.directive()
定义一个获取焦点的全局指令(v-focus)并应用在输入编号的表单中; - 过滤器:使用Vue.filter()定义一个过滤器(format)将将日期转为自己想要的格式;
- 计算属性:在vue实例中添加一个参数属性computed来统计图书的总数量,直接统计图书的长度即可实现;
- 侦听器:在vue实例中添加一个参数属性watch来验证图书是否存在,并且应用在输入名称的表单里,如果图书已经存在则提交按钮则会失效。
- 生命周期:使用mounted()钩子函数将数据填充到模板中。
页面展示:
HTML静态模板结构:
<div id="app">
<div class="title">图书管理</div>
<div class="book">
<label for="id">编号:</label>
<input type="text" id="id" v-model='id' :disabled='flag' v-focus>
<label for="name">名称:</label>
<input type="text" id="name" v-model='name'>
<button @click='handle' :disabled='handleflag'>提交</button>
</div>
<div class="total">
<span>图书总量:</span>
<span>{{total}}</span>
</div>
<table cellspacing="0">
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
<tr :key='item.id' v-for='item in books'>
<td v-cloak>{{item.id}}</td>
<td v-cloak>{{item.name}}</td>
<td v-cloak>{{item.date | format('yyyy-MM-dd')}}</td>
<td><button @click='edit(item.id)'>修改</button> | <button @click='del(item.id)'>删除</button></td>
</tr>
</table>
</div>
css样式结构:
<style>
* {
padding: 0;
margin: 0;
}
#app {
width: 1200px;
margin: 100px auto;
text-align: center;
}
.title {
font-size: 25px;
}
.book {
margin-top: 20px;
}
table {
margin: 30px 0 0 410px;
}
table tr:first-child {
background-color: peru;
}
tr td,
th {
width: 100px;
border: 1px dotted peru;
}
button {
/* background-color: pink; */
border: none;
}
.total {
margin-top: 20px;
background-color: orange;
width: 100px;
margin-left: 548px;
}
</style>
js代码:
<script>
// 定义一个带参数的过滤器
Vue.filter('format', function(value, arg) {
if (arg == 'yyyy-MM-dd') {
return value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
}
});
// 自定义全局指令`v-focus`
Vue.directive('focus', {
bind: function(el) {
// 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
},
//当被绑定的元素插入到 DOM 中时……
inserted: function(el) {
// 获得焦点
el.focus();
},
update: function() {
// 所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。
}
});
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
date: new Date(),
flag: false,
handleflag: false,
books: []
},
methods: {
handle: function() {
if (this.id == '' || this.name == '') {
alert("请输入内容!!!");
} else if (this.flag) {
//修改后重新提交
this.books.some(item => {
if (item.id == this.id) {
item.name = this.name;
item.date = this.date;
//完成更新后终止循环遍历
return true;
};
})
this.flag = false;
} else {
//添加图书
var book = {};
book.id = this.id;
book.name = this.name;
book.date = this.date;
this.books.push(book);
}
this.id = '';
this.name = '';
},
edit: function(id) {
//禁止修改编号
this.flag = true;
//根据ID编辑数据
//点击修改后将数据填充到表单进行修改
var book = this.books.filter(function(item) {
return item.id == id;
});
this.id = book[0].id;
this.name = book[0].name;
},
del: function(id) {
//删除图书
// 方法一:根据id从数组中查找元素的索引
// var index = this.books.findIndex(function(item) {
// return item.id == id;
// });
// //根据索引删除数组元素
// this.books.splice(index, 1);
//方法二 通过数组的filter方法
this.books = this.books.filter(function(item) {
return item.id != id;
});
}
},
computed: {
total: function() {
//利用计算属性统计书本的总量
return this.books.length;
}
},
watch: {
name: function(val) {
//验证图书是否存在
var flag = this.books.some(function(item) {
return item.name == val;
});
if (flag) {
this.handleflag = true;
} else {
this.handleflag = false;
}
}
},
mounted: function() {
//该生命周期函数被触发的时候,模板已经可以使用
//一般此时用于获取后台数据,然后把数据填充到模板
var data = [{
id: 1,
name: '水浒传',
date: new Date()
}, {
id: 2,
name: '三国演义',
date: new Date()
}];
this.books = data;
}
})
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)