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,连接数据库 /// & ...
随机推荐
- 揭开神秘面纱，会stream流就会大数据
目录 准备工作 1.map类 1.1 java stream map 1.2 spark map 1.2.1 MapFunction 1.2.2 MapPartitionsFunction 2.fla ...
- C++ Primer 5th 阅读笔记：前言
机器效率和编程效率 Its focus, and that of its programming community, has widened from looking mostly at machi ...
- .NET Core 波场链离线签名、广播交易（发送 TRX和USDT）笔记
Get Started NuGet You can run the following command to install the Tron.Wallet.Net in your project. ...
- 数据剖析更灵活、更快捷，火山引擎 DataLeap 动态探查全面升级
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近期,火山引擎 DataLeap 上线"动态探查"能力,为用户提供全局数据视角.完善的抽样策略 ...
- 2023-03-16：给定一个由 0 和 1 组成的数组 arr ，将数组分成 3 个非空的部分， 使得所有这些部分表示相同的二进制值。 如果可以做到，请返回任何 [i, j]，其中 i+1 ＜ j
2023-03-16:给定一个由 0 和 1 组成的数组 arr ,将数组分成 3 个非空的部分, 使得所有这些部分表示相同的二进制值. 如果可以做到,请返回任何 [i, j],其中 i+1 < ...
- 2023-01-03：超过5名学生的课。编写一个SQL查询来报告 至少有5个学生 的所有班级，返回结果不限顺序。请问sql语句如何写？ +---------+ | class | +-----
2023-01-03:超过5名学生的课.编写一个SQL查询来报告 至少有5个学生 的所有班级,返回结果不限顺序.请问sql语句如何写? ±--------+ | class | ±--------+ ...
- 2022-03-30：有m个同样的苹果，认为苹果之间无差别， 有n个同样的盘子，认为盘子之间也无差别， 还有，比如5个苹果如果放进3个盘子， 那么1、3、1和1、1、3和3、1、1的放置方法，也认为是
2022-03-30:有m个同样的苹果,认为苹果之间无差别, 有n个同样的盘子,认为盘子之间也无差别, 还有,比如5个苹果如果放进3个盘子, 那么1.3.1和1.1.3和3.1.1的放置方法,也认为是 ...
- 在 ASP.NET Core Web API 中处理 Patch 请求
一.概述 PUT 和 PATCH 方法用于更新现有资源. 它们之间的区别是,PUT 会替换整个资源,而 PATCH 仅指定更改. 在 ASP.NET Core Web API 中,由于 C# 是一种静 ...
- 计蒜客蓝桥杯省赛模拟G
题目 一天蒜头君得到 n 个字符串 si,每个字符串的长度都不超过 1010. 蒜头君在想,在这 n 个字符串中,以 si 为后缀的字符串有多少个呢? 输入格式 第一行输入一个整数 n. 接下来 n ...
- KO之间互相调用
需求 假设有两个KO,命名为moduleA.KO,moduleB.KO,现在要实现在moduleB.KO中调用moduleA.KO中的函数. 实现 ModuleA实现 源码: #include < ...