vue实现图书管理案例

需求：

1. 动态在页面中展示图书列表；

2. 在输入框中输入图书名称，按回车键实现图书添加功能（图书名称不能为空）；

3. 点击“删除"按钮可以实现删除图书

参考效果图：

代码：注意：代码所需vue可以通过npm i vue --save下载，然后引入即可

<!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>图书管理信息表</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><script src="./js/vue.js"></script><style>.btn {padding: 0px 12px;}</style>
</head><body><div id="app" class="container"><h3 class="text-center text-primary">图书管理信息表</h3><input type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入图书名称" v-model="bookname"@keydown.enter="add()"><table class="table table-bordered table-hover table-striped text-center" width="500"><tr><th class="text-center">id</th><th class="text-center">书名</th><th class="text-center">时间</th><th class="text-center">操作</th></tr><tr v-for="(item,index) in arr" :key="item.id"><td>{{index+1}}</td><td>{{item.bookname}}</td><td>{{item.time}}</td><td><button class="btn btn-danger" @click="del(index)">删除</button></td></tr><tr v-if="arr.length==0"><td colspan="4">暂无数据~</td></tr><tr v-else><td colspan="4"><button class="btn btn-danger" @click="delAll">全部删除</button></td></tr></table></div><script>new Vue({//挂载点el: "#app",//数据data: {arr: sessionStorage.getItem("arr") ? JSON.parse(sessionStorage.getItem("arr")) : [],bookname: ""},//方法methods: {// 添加add() {if (this.bookname == "") {alert("图书名称不能为空");return;}this.arr.push({bookname: this.bookname,time: new Date().toLocaleTimeString()});// 存储到本地sessionStorage.setItem("arr", JSON.stringify(this.arr))this.reset();},// 清空reset() {this.bookname = "";},// 删除del(index) {this.arr.splice(index, 1);// 存储到本地sessionStorage.setItem("arr", JSON.stringify(this.arr));},// 全部删除delAll() {this.arr = [];// 存储到本地sessionStorage.setItem("arr", JSON.stringify(this.arr));}}})</script>
</body></html>

效果图：

vue实现图书管理案例相关推荐

Vue 实现图书管理案例
案例效果案例思路图书列表实现静态列表效果基于数据实现模板效果处理每行的操作按钮添加图书实现表单的静态效果添加图书表单域数据绑定添加按钮事件绑定实现添加业务逻辑修改图书修改信息填 ...
026_图书管理案例
1. 新建一个名为Books的动态Web工程 1.1. 添加gson-2.8.5.jar 1.2. 编写Book.java package com.bjbs.action;import java.io ...
Vue实现后台管理案例
Vue实现后台管理案例(★★★) 案例效果: 点击左侧的"用户管理","权限管理","商品管理","订单管理",&quo ...
Vue 图书管理案例
这篇文章主要为大家详细介绍了vue.js实现图书管理功能,具有一定的参考价值, 感兴趣的小伙伴们可以参考一下 <!DOCTYPE html> <html lang="en& ...
Django案例——图书管理案例
文章目录项目开始前 App的建立和路由分配数据库的建立与连接模型映射(建立表格) 视图函数最终的效果图项目代码连接见:链接:https://pan.baidu.com/s/1mRYMVZkp ...
ajax图书管理案例
rows数组中就是: rows.join('')整体添加单引号里面如何加参数语法可以通过"'+ 参数+'" 即2 双引号里面加2 单引号加两个加号 data=&q ...
附录1.图书管理案例
目录 1 静态页面 2 后端 3 JS部分点击添加可以添加新的图书数据存放在数据库中,刷新页面后,数据不变点击删除后可以删除指定的图书 1 静态页面在视频中用到了Bootstrap提供 ...
[Vue.js] 基础 -- 综合案例 -- 图书管理
综合案例 – 图书管理补充知识(数组相关API) 变异方法(修改原有数据) push() pop() shift() unshift() splice() sort() reverse() 替换数组 ...
vue案例-图书管理
1.学习vue时做的一个小案例,本身案例很简单,经过优化又加些比较常用的功能,比如在添加图书前,先判断编号是否存在,并提示给用户,并且编号文本框只能输入数字等等优化. 2.使用到数组数据,方法,监视, ...

vue实现图书管理案例

vue实现图书管理案例相关推荐

最新文章

热门文章