Vue实现图书管理小案例
更新时间：2020年12月03日 08:40:14 作者：代码在路上
这篇文章主要为大家详细介绍了Vue实现图书管理小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue实现图书管理的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.grid{
margin:auto;
width:500px;
text-align:center;
}
.grid table{
width:100%;
border-collapse:collapse;
}
.grid th,td{
padding:10px;
border:1px solid orange;
height:35px;
line-height:35px;
}
.grid th{
background-color:orange;
}
.book{
background-color:orange;
border-bottom:1px solid #ccc;
padding:5px;
}
input{
width:150px;
outline:none;
}
.grid .total{
height:30px;
line-height:30px;
background-color:orange;
border-bottom:1px solid #ccc;
}
</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="name">名称：</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 in books'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</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>
<script src="js/vue.js"></script>
<script>
//自定义指令
Vue.directive('focus',{
inserted:function(el){
el.focus();
}
})
//过滤器(格式化日期)
Vue.filter('format', function(value, arg) {
function dataFormat(date, format) {
if (typeof date === "string") {
var mts = date.match(/(\/Date\((\d+)\)\/)/);
if (mts && mts.length >= 3) {
date = parseInt(mts[2]);
}
}
date = new Date(date);
if (!date || date.toUTCString() == "Invalid Date") {
return "";
}
var map = {
"M": date.getMonth() + 1, //月
"d": date.getDate(), //日
"h": date.getHours(), //小时
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
var v = map[t];
if (v !== undefined) {
if (all.length > 1) {
v = '0' + v;
v = v.substr(v.length - 2);
}
return v;
} else if (t == 'y') {
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
}
return dataFormat(value, arg);
})
var vm=new Vue({
el:'#app',
data:{
flag:false,
submitFlag:false,
id:'',
name:'',
books:[]
},
methods:{
handle:function(){
if(this.flag){
//修改操作：就是根据当前的id去更新数组中对应的数据
//箭头函数的this不是window
//some方法判断什么时候终止循环
this.books.some((item)=>{
if(item.id==this.id){
item.name=item.name;
//完成更新操作之后，要终止循环
return true;
}
});
this.flag=false;
}else{
//添加操作
//添加图书
var book={};
book.id=this.id;
book.name=this.name;
book.date=new Date();
this.books.push(book);
}
//清空表单
this.id='';
this.name='';
},//handle结束
toEdit:function(id){
//禁止修改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;
},//toEdit结束
deleteBook: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;
//});
}//deleteBook结束
},
computed:{
total:function(){
//计算图书的总数
return this.books.length;
}
},//computed结束
watch:{
name:function(val){
//验证图书名称是否已经存在
var flag=this.books.some(function(item){
return item.name==val;
});
if(flag){
//图书名称存在
this.submitFlag=true;
}else{
this.submitFlag=false;
}
}
},//watch结束
mounted:function(){
//该生命周期钩子函数被触发的时候，模板已经可以使用
//一般用于获取后台数据，然后把数据填充到模板
//模拟接口
var data=[{
id:1,
name:'三国演义',
date:1585609975000
},{
id:2,
name:'水浒传',
date:1586609975000
},{
id:3,
name:'红楼梦',
date:1587609975000
},{
id:4,
name:'西游记',
date:1588609975000
}];
this.books=data;
}
});
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文给大家介绍Vue3中使用v-model高级用法参数绑定传值的相关知识,包括单个输入框传值和多个输入框传值,一个组件接受多个v-model值,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-10-10
开发中经常会遇到跨组件通信的场景,props 逐层传递的方法实在是太不优雅了,所以今天总结下可以更加简单的跨组件通信的一些方法,文中通过代码实例讲解的非常详细,需要的朋友可以参考下2023-11-11
下面小编就为大家带来一篇Vue-resource拦截器判断token失效跳转的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
Vue是可以自定义指令的,最近学习过程中遇见了一个需要懒加载的功能，发现网上这方面的资料较少，所以下面这篇文章主要给大家介绍了关于Vue.js如何实现路由懒加载的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-08-08
详解vue-cli项目中用json-sever搭建mock服务器
这篇文章主要介绍了详解vue-cli项目中用json-sever搭建mock服务器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了vue组件传值的实现方式,结合实例形式总结分析了vue.js组建传值的三种实现方式,包括父传子、子传父及非父子传值,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了vue3组件的挂载更新流程，文中通过代码示例给大家介绍的非常详细，对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
这篇文章主要为大家详细介绍了vue+axios+java实现文件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
vue3使用拖拽组件draggable.next的保姆级教程
做项目的时候遇到了一个需求,拖拽按钮到指定位置，添加一个输入框,这篇文章主要给大家介绍了关于vue3使用拖拽组件draggable.next的保姆级教程,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue element 关闭当前tab 跳转到上一路由操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论