Vue实现简单图书管理例子
以下内容整理自网络。
说明
本例主要涵盖以下知识点：
- 数据绑定
- 条件与循环
- 计算属性
- 监听器
- 过滤器
- 常见数组和对象操作
- vue生命周期
示例演示
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图书管理案例</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{
margin-top: 10px;
}
</style>
</head>
<body>
<div id='app'>
<div class="grid">
<div>
<h1>图书管理</h1>
<div class="book">
<div>
<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='add' :disabled='submitFlag'>提交</button>
</div>
</div>
</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='toDelete(item.id)'>删除</a>
</td>
</tr>
</tbody>
</table>
<div class="total">
<span>图书总数：</span>
<span>{{total}}</span>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
// 聚焦指令
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});
// 自定义日期过滤器
Vue.filter('format', function(value, arg) {
function dateFormat(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 dateFormat(value, arg);
});
var vm = new Vue({
el: '#app',
data: {
submitFlag: false,
flag: false,
id:'',
name:'',
books:[]
},
methods: {
add: function(){
// 修改
if(this.flag){
// 根据当前ID更新数值中的数据
this.books.some((item)=>{
if(item.id == this.id){
item.name=this.name;
item.date=new Date();
// 完成更新后终止循环
return true;
}
})
this.flag=false
}else{
this.flag=false;
var book={};
book.id=this.id;
book.name=this.name;
book.date=new Date();
this.books.push(book);
}
this.id='';
this.name='';
},
toEdit: function(id){
// 根据id查询对象
var book= this.books.filter(function(item){
return item.id==id;
});
this.id=book[0].id;
this.name=book[0].name;
// 禁止修改id
this.flag=true;
},
toDelete: function(id){
// 方法一
var index = this.books.findIndex(function(item){
return item.id==id;
});
this.books.splice(index, 1);
// 方法二
// 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.submitFlag=true;
}else{
this.submitFlag=false;
}
}
},
mounted:function() {
// 模板可用
var data = [{
id:1,
name:'大秦帝国',
date: new Date()
},
{
id:2,
name:'走出剧情',
date: new Date()
},
{
id:3,
name:'活着',
date: new Date()
}];
this.books = data;
}
})
</script>
</body>
</html>Vue实现简单图书管理例子的更多相关文章
- 基于vue-cli、elementUI的Vue超简单入门小例子
- 这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. - 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多. #如若没有安装过vu ...
- vue实现图书管理demo
年后公司的项目要求用到vue.js知识,我angular没有学,node.js和react也只是了解了一点点,所以学起来比较困难.如果你想学vue.js的知识,推荐网址:http://vuejs.or ...
- vue.js快速搭建图书管理平台
前 言 上一期简单讲解了vue的基本语法,这一次我们做一个小项目,搭建一个简单的图书管理平台,能够让我们更深刻的理解这门语言的妙用. 1.DEMO样式 首先我们需要搭建一个简单的demo样式 ...
- 基于vue.js的简单用户管理
功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...
- vue双向数据绑定最最最最最简单直观的例子
vue双向数据绑定最最最最最简单直观的例子 一.总结 一句话总结:双向绑定既不仅model可以影响view的数据,view也可以影响model的数据 view model 数据 1.vue双向数据绑定 ...
- 为管理复杂组件状态困扰？试试 vue 简单状态管理 Store 模式【转】
https://juejin.im/post/5cd50849f265da03a54c3877 在 vue 中,通信有几种形式: 父子组件 emit/on vuex 中共享 state 跨组件 Eve ...
- day 47 Django 4的简单应用 创建简单的图书管理 (单表的增删改查)
前情提要 Django 已经学了大半.. 很多东西已经能够使用在生产环境当中 一:模糊查询 二:单表删除 三:单表修改 四:图书管理 图书管理操作 视图结构 A:路由层 A :配置路由文件 参数解 ...
- 66、django之模型层（model）--多表相关操作（图书管理小练习）
前面几篇随笔的数据库增删改查操作都是在单表的操作上的,然而现实中不可能都是单表操作,更多的是多表操作,一对一,一对多,多对多的表结构才是我们经常需要处理的,本篇将带我们了解多表操作的一些相关操作.也会 ...
- django之模型层（model）--多表相关操作（图书管理小练习）
前面几篇随笔的数据库增删改查操作都是在单表的操作上的,然而现实中不可能都是单表操作,更多的是多表操作,一对一,一对多,多对多的表结构才是我们经常需要处理的,本篇将带我们了解多表操作的一些相关操作.也会 ...
- 沉淀，再出发：VUE的简单理解
沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...
随机推荐
- 【转帖】71.常用的显示GC日志的参数、GC日志分析、日志分析工具的使用
目录 1.常用的显示GC日志的参数 2.图解垃圾`GC`日志(重要) 3.日志分析工具的使用 1.常用的显示GC日志的参数 解释: 日志中,GC和Full GC表示的是GC的类型.GC只在新生代进行, ...
- 【转帖】一道面试题：JVM老年代空间担保机制
面试问题 昨天面试的时候,面试官问的问题: 什么是老年代空间担保机制?担保的过程是什么? 老年代空间担保机制是谁给谁担保? 为什么要有老年代空间担保机制?或者说空间担保机制的目的是什么? 如果没有老年 ...
- [转帖]讨论在 Linux Control Groups 中运行 Java 应用程序的暂停问题原创
https://heapdump.cn/article/1930426 说明 本篇原文来自 LinkedIn 的 Zhenyun Zhuang,原文:Application Pauses When R ...
- VOP 消息仓库演进之路|如何设计一个亿级企业消息平台
作者:京东零售 李孟冬 VOP作为京东企业业务对外的API对接采购供应链解决方案平台,一直致力于从企业采购数字化领域出发,发挥京东数智化供应链能力,通过产业链上下游耦合与链接,有效助力企业客户的成本优 ...
- PLC检测
填空题1 填空A-E 程序图一 第一训练题的程序,一个是用常开触点,一个是用上升沿指令,建议选上升沿指令编程 程序二 程序图三 程序四 程序五
- 淘宝一面：“说一下 Spring Boot 自动装配原理呗？”
本文已经收录进 Github 95k+ Star 的Java项目JavaGuide .JavaGuide项目地址 : https://github.com/Snailclimb/JavaGuide . ...
- 【六】强化学习之DQN---PaddlePaddlle【PARL】框架｛飞桨｝
相关文章: [一]飞桨paddle[GPU.CPU]安装以及环境配置+python入门教学 [二]-Parl基础命令 [三]-Notebook.&pdb.ipdb 调试 [四]-强化学习入门简 ...
- UDP通信 [补档-2023-07-22]
UDP通信 6-1 简介 UDP通信是面向无链接的,不稳定,不可靠,不安全的一种通信方式.TCP在通信前发送方会向接收方进行三次握手链接,然后确认双方链接后才会进行数据传输,最后四次挥手保证链接关 ...
- 基于volcano实现节点真实负载感知调度
本文分享自华为云社区<基于volcano实现节点真实负载感知调度>,作者: 可以交个朋友. 背景 默认调度器调度器视某个节点的空闲可调度资源=节点可分配资源 - SUM(节点上已调度Pod ...
- layui下拉框可手动输入
先看效果 layui版本:layui@2.8.17 HTML代码: <div class="layui-form-item"> <label class=&quo ...