2021-7-12 VUE的增删改查功能简单运用
Vue增删改查简易实例
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style type="text/css">
.ulStyle{
list-style-type: none;
margin: 10px 30px;
}
.divStyle{
width: 600px;
height: 400px;
border: 1px solid gray;
margin: 100px 400px;
background-color: gray;
}
</style>
</head>
<body>
<div id="app" class="divStyle">
<div style="margin: 20px;">编号：<input type="text" name="" v-model="book.id" :disabled="flat">书名：<input type="text" name="" v-model.lazy="book.bookName"><input type="button" name="" value="添加" @click="handle"></div>
<div style="background-color: orange; height: 100%;width: 100%;">
<ul style="margin-top:20px;">
<li class="ulStyle" v-for="item in books">{{item.id}}---{{item.bookName}}-------<a href="" @click.prevent="toEdit(item.id)">修改</a>||<a href="" @click.prevent="del(item.id)">删除</a></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
flat:false,
book:{id:'',bookName:'',date:''},
books:[{
id:1,
bookName:'斗破苍穹',
date:''
},{
id:2,
bookName:'遮天',
date:''
},{
id:3,
bookName:'灵域',
date:''
}]
},
methods:{
handle:function(){
if (this.flat) {
this.books.some((item) => {
if (item.id==this.book.id) {
item.bookName=this.book.bookName;
console.log(this.book.bookName);
this.flat=false;
this.book={};
return true;
}});
}else{
console.log(this.book);
this.books.push(this.book);
this.book={};
}
},
toEdit:function(id){
var oldbook=this.books.filter(function(item){
return item.id==id;
});
this.book.id=oldbook[0].id;
this.book.bookName=oldbook[0].bookName;
this.flat=true;
},
del: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;
});
}
}
});
</script>
</body>
</html>
Vue的图书管理系统
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style type="text/css">
.ulStyle{
list-style-type: none;
margin: 10px 30px;
}
.divStyle{
width: 600px;
height: 400px;
border: 1px solid gray;
margin: 100px 400px;
background-color: gray;
}
</style>
</head>
<body>
<div id="app" class="divStyle">
<div style="margin: 20px;">编号：<input type="text" name="" v-model="book.id" :disabled="flat">书名：<input type="text" name="" v-model.lazy="book.bookName" v-focus><input type="button" name="" value="添加" @click="handle"></div>
<div style="background-color: orange; height: 100%;width: 100%;">
<div>{{total}}</div>
<ul style="margin-top:20px;">
<li class="ulStyle" v-for="item in books">{{item.id}}---{{item.bookName}}----{{item.date | toDate}}---<a href="" @click.prevent="toEdit(item.id)">修改</a>||<a href="" @click.prevent="del(item.id)">删除</a></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
flat:false,
book:{id:'',bookName:'',date:''},
books:[{
id:1,
bookName:'斗破苍穹',
date:''
},{
id:2,
bookName:'遮天',
date:''
},{
id:3,
bookName:'灵域',
date:''
}]
},
methods:{
handle:function(){
if (this.flat) {
this.books.some((item) => {
if (item.id==this.book.id) {
item.bookName=this.book.bookName;
console.log(this.book.bookName);
this.flat=false;
this.book={};
return true;
}});
}else{
console.log(this.book);
var a=new Date();
this.book.date=a;
this.books.push(this.book);
this.book={};
}
},
toEdit:function(id){
var oldbook=this.books.filter(function(item){
return item.id==id;
});
this.book.id=oldbook[0].id;
this.book.bookName=oldbook[0].bookName;
this.flat=true;
},
del: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;
});
}
},
filters:{
toDate:function(val){ }
},
computed:{
total:function(){
return this.books.length;
}
},
watch:{ },
directives:{
focus:{
inserted:function(el){
el.focus();
}
}
}
});
</script>
</body>
</html>
2021-7-12 VUE的增删改查功能简单运用的更多相关文章
- vue的增删改查（简单版）
<template> <div class="about"> <div> <input type="te ...
- Vue实现增删改查功能
简单的表单CURD功能demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- vue实现增删改查（内附源代码）
VUE+Element实现增删改查 @ 目录 VUE+Element实现增删改查 前言 实验步骤 总结: 源代码 前言 &最近因为一些原因,没有更博客,昨天老师布置了一个作业,用vue实现增删 ...
- django学习-12.访问不同url/接口地址实现对指定数据的增删改查功能
1.前言 通过前面博客[django学习-10.django连接mysql数据库和创建数据表]里的操作,我们已经成功在数据库[hongjingsheng_project]里创建了一张数据表[hello ...
- BootstrapTable与KnockoutJS相结合实现增删改查功能
http://www.jb51.net/article/83910.htm KnockoutJS是一个JavaScript实现的MVVM框架.通过本文给大家介绍BootstrapTable与Knock ...
- springmvc+spring3+hibernate4框架简单整合,简单实现增删改查功能
转自:https://blog.csdn.net/thinkingcao/article/details/52472252 C 所用到的jar包 数据库表 数据库表就不用教大家了,一张表,很简 ...
- MyBatis简单的增删改查以及简单的分页查询实现
MyBatis简单的增删改查以及简单的分页查询实现 <? xml version="1.0" encoding="UTF-8"? > <!DO ...
- Online Coding开发模式 (通过在线配置实现一个表模型的增删改查功能，无需写任何代码)
JEECG 智能开发平台. 开发模式由代码生成器转变为Online Coding模式 (通过在线配置实现一个表模型的增删改查功能,无需一行代码,支持用户自定义 ...
- 使用MVC5+Entity Framework6的Code First模式创建数据库并实现增删改查功能
此处采用VS2017+SqlServer数据库 一.创建项目并引用dll: 1.创建一个MVC项目 2.采用Nuget安装EF6.1.3 二.创建Model 在models文件夹中,建立相应的mode ...
- C# 对MongoDB 进行增删改查的简单操作
C# 对MongoDB 进行增删改查的简单操作 下面演示下C#操作MongoDB驱动的简单的增删改查代码 运用到的MongoDB支持的C#驱动,当前版本为1.6.0 1,连接数据库 /// & ...
随机推荐
- P1014 [NOIP1999 普及组] Cantor 表
题目链接:https://www.luogu.com.cn/problem/P1014 有理数可枚举 In 1873 Cantor proved the rational numbers counta ...
- 认识 CPU 底层原理（2）——逻辑门
本文为B站UP主硬件茶谈制作的系列科普<[硬件科普]带你认识CPU>系列的学习笔记,仅作个人学习记录使用,如有侵权,请联系博主删除 上一篇文章我们从最基本的粒子的角度认识了组成CPU的最基 ...
- vue全家桶进阶之路26：Vue.js 3.0与Vue.js 2.x 的比较和注意事项
Vue.js 3.0 是 Vue.js 框架的最新版本,于 2020 年 9 月正式发布.Vue.js 3.0 主要的改进和新特性包括: 更好的性能:Vue.js 3.0 使用了更快的虚拟 DOM 实 ...
- 在Centos7上安装PXE装机环境来批量安装操作系统
步骤 1:安装必要的软件包 首先,需要确保系统已安装 dhcp.tftp-server 和 httpd 等软件包.可以使用以下命令进行安装: yum install -y dhcp tftp-serv ...
- flutter填坑之旅（widget原理篇）
Flutter 的跨平台思路快速让他成为"新贵",连跨平台界的老大哥 "JS" 语言都"视而不见",大胆的选择 Dart 也让 Flutte ...
- 云服务器挂载easyconnect
参考:easyconnect命令版地址 https://github.com/Hagb/docker-easyconnect 前提条件: 云服务器(以阿里云服务器 Centos7.6 为例) 用途: ...
- AI 协助办公 ｜记一次用 GPT-4 写一个消息同步 App
GPT-4 最近风头正劲,作为 NebulaGraph 的研发人员的我自然是跟进新技术步伐.恰好,现在有一个将 Slack channel 消息同步到其他 IM 的需求,看看 GPT-4 能不能帮我完 ...
- jvm中类和对象定义存储基础知识
1 类文件数据结构类型 Class文件结构主要有两种数据结构:无符号数和表 •无符号数:用来表述数字,索引引用.数量值以及字符串等,比如 图1中类型为u1,u2,u4,u8分别代表1个字节,2个字节, ...
- OpenSSL 是什么？
OpenSSL 是什么? OpenSSL 是开源的程序套件,该套件由三部分组成: libcrypto:具有通用功能的加密库,里面包含众多加密算法 libssl:实现 SSL/TLS 功能 openss ...
- 写一个Python简单的Socket网络通讯
完成需求 用Python完成一个简单的Socket通讯实例 1. 服务端 用于提供服务 源码: import socket s = socket.socket() # 创建服务器端套接字 # sk.s ...