1.学习vue时做的一个小案例，本身案例很简单，经过优化又加些比较常用的功能，比如在添加图书前，先判断编号是否存在，并提示给用户，并且编号文本框只能输入数字等等优化。
2.使用到数组数据，方法，监视，挂载钩子，数据是本地数据，方法实现了大部分的功能函数，监视属性实现动态检查数据的合法性，挂载实现了计时器的触发，每秒查询本地时间并且做了格式化，主要是修改与添加图书时，自动调用本地的时间日期。

-案例所有代码在文章末尾-

案例功能-增删改查

1.效果图
2.添加与修改图书
3.删除图书
4.查询图书
5.全部代码

1.效果图

静态图

动态图

2.添加与修改图书

这个vue方法实现增加与修改的图书，一个方法解决增加与修改图书，实现代码复用

 addbook: function () {if (this.flag) {// changetime;this.books.some((item) => {if (item.id == this.idmsg) {item.date = this.dates;item.name = this.namemsg;this.tipmsg = ""return true;}})} else {arr = {id: this.idmsg,name: this.namemsg,date: this.dates};this.books.push(arr);this.tipmsg = ""}},

3.删除图书

根据findIndex方法找到需要删除的数组索引，通过splice方法删除（splice是在源数组修改）

    del: function (id) {var index = this.books.findIndex(function (item) {return item.id == id})this.books.splice(index, 1)},

4.查询图书

通过vue的watch监视属性，动态监视数据的变化，数据一变化就调用函数方法，来查询数组的编号ID是否存在，如果存在或不存在都会通过信息提示给用户。

 idmsg: function (val) {this.idmsg = val.replace(/\D/g, "")if (this.flag) {this.tipmsg = ""} else {this.books.some((item) => {if (item.id == val) {this.tipmsg = "ID已存在"return true} else if (val == "") {this.tipmsg = ""} else {this.tipmsg = "ID可用"}})}}

5.全部代码

<!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><style>a {text-decoration: none;}.left {float: left;}.right {float: right;}caption {font-weight: bold;font-size: 24px;}.clearfix::after {display: block;content: "";height: 0;clear: both;}table {width: 600px;margin: auto;background-color: #f4faed;/* background-color: #247624; */border: rebeccapurple solid 1px;}th,td {text-align: center;width: 150px;border: rebeccapurple solid 1px;}th {background-color: #e3f1d1;}.tail {margin: 20px auto;width: 600px;font-weight: bold;font-size: 20px;/* border: 1px solid brown; */}#submit {display: none;}.submit {font-weight: bold;margin: 20px auto;width: 600px;margin-top: 15px;/* background-color: aliceblue; */}.submit input:nth-of-type(1) {text-align: center;width: 100px;}.submit input:nth-of-type(2) {width: 150px;text-align: center;}.submit span {margin-left: 18px;}.submit .go {margin-left: 8px;width: 80px;}.crrent {display: none;}.show {display: block;}.tipmsg {font-size: 12px;color: brown;width: 240px;line-height: 14px;margin-top: 5px;text-align: center;/* text-indent: 20px; */}</style>
</head><body><div id="app"><table><caption>图书管理</caption><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}}</td><td><a href="#" @click.prevent="change(item.id,item.name)">修改</a><span> | </span> <a href="#"@click="del(item.id)">删除</a></td></tr></tbody></table><div class="submit" :class="crrent"><span>编号：</span><input type="text" v-model.trim="idmsg" :disabled="flag" placeholder="请输入数字"><span>书名：</span><input type="text" v-model="namemsg"><input type="button" class="go" v-model="tip" @click="addbook"><input type="button" class="go" value="取消" @click="cancle"><div class="tipmsg">{{tipmsg}}</div></div><div class="tail clearfix"><div class="left"> <span>图书数量：</span><span style="color: brown;font-size: 25px;">{{books.length}}</span></div><div class="right"> <a href="#" @click="sub">添加图书(add)</a></div></div><!-- {{dates}}<input type="button" value="123" @click="changetime()"> --></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script><script>new Vue({el: "#app",data() {return {dates: "",tipmsg: "",flag: false,idmsg: "",namemsg: "",tip: "",crrent: "crrent",books: [{id: "1",name: "三国演义",date: "9-1日15:35",},{id: "2",name: "水浒传",date: "9-2日15:35"},{id: "3",name: "红楼梦",date: "9-5日15:35"},{id: "4",name: "西游记",date: "9-19日15:35"},]}},mounted() {this.changetime();},methods: {changetime: function () {// var ret = ""setInterval(() => {var dates = new Date()this.dates = (dates.getMonth() + 1) + "月" + dates.getDate() + "日" + dates.getHours() + ":" + dates.getMinutes() + ":" + dates.getSeconds()}, 1000)},sub: function () {this.idmsg = "";this.flag = falsethis.crrent = "show"this.tip = "添加图书"this.namemsg = "";this.tipmsg = "";},cancle: function () {this.crrent = "crrent"},change: function (id, name) {this.flag = true;// console.log(this.flag);this.crrent = "show"this.tip = "修改图书"this.idmsg = id;this.namemsg = name;this.tipmsg = "";},addbook: function () {if (this.flag) {// changetime;this.books.some((item) => {if (item.id == this.idmsg) {item.date = this.dates;item.name = this.namemsg;this.tipmsg = ""return true;}})} else {arr = {id: this.idmsg,name: this.namemsg,date: this.dates};this.books.push(arr);this.tipmsg = ""}},del: function (id) {var index = this.books.findIndex(function (item) {return item.id == id})this.books.splice(index, 1)},},watch: {idmsg: function (val) {this.idmsg = val.replace(/\D/g, "")if (this.flag) {this.tipmsg = ""} else {this.books.some((item) => {if (item.id == val) {this.tipmsg = "ID已存在"return true} else if (val == "") {this.tipmsg = ""} else {this.tipmsg = "ID可用"}})}}}})</script>
</body></html>

vue案例-图书管理相关推荐

[Vue.js] 基础 -- 综合案例 -- 图书管理
综合案例 – 图书管理补充知识(数组相关API) 变异方法(修改原有数据) push() pop() shift() unshift() splice() sort() reverse() 替换数组 ...
Vue 实现图书管理案例
案例效果案例思路图书列表实现静态列表效果基于数据实现模板效果处理每行的操作按钮添加图书实现表单的静态效果添加图书表单域数据绑定添加按钮事件绑定实现添加业务逻辑修改图书修改信息填 ...
vue实现图书管理案例
需求: 1. 动态在页面中展示图书列表: 2. 在输入框中输入图书名称,按回车键实现图书添加功能(图书名称不能为空): 3. 点击"删除&qu ...
Django案例——图书管理案例
文章目录项目开始前 App的建立和路由分配数据库的建立与连接模型映射(建立表格) 视图函数最终的效果图项目代码连接见:链接:https://pan.baidu.com/s/1mRYMVZkp ...
数据库开发案例—图书管理系统设计
目录第1关数据库表设计-图书表本关任务:创建图书管理数据库系统的图书表. 数据库整体设计代码实现第2关数据库表设计-读者表代码实现第3关数据库表设计-关联表代码实现第1关数据库 ...
前端学习（1222）:综合案例图书管理1
Vue 图书管理案例
这篇文章主要为大家详细介绍了vue.js实现图书管理功能,具有一定的参考价值, 感兴趣的小伙伴们可以参考一下 <!DOCTYPE html> <html lang="en& ...
026_图书管理案例
1. 新建一个名为Books的动态Web工程 1.1. 添加gson-2.8.5.jar 1.2. 编写Book.java package com.bjbs.action;import java.io ...
案例：图书管理——补充知识（数组相关API）||补充知识（数组响应式变化）
案例:图书管理 Vue数组操作 1.变异方法:会影响数组的原始数据的变化. 2.替换数组:不会影响原始的数组数据,而是形成一个新的数组. <!DOCTYPE html> <html ...

vue案例-图书管理