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,连接数据库 /// & ...
随机推荐
- Java双向链表实现队列
将双向链表做简单的改造,即可实现一个FIFO(First Input First Out)队列, 该队列只在头节点出队,尾节点入队. 一般来说定义节点类只需一个后驱节点next即可. 这里保留pre节 ...
- Selenium Grid入门详解
一.简介 Selenium是Selenium套件的一部分,它专门用于并行运行多个测试用例在不同的浏览器.操作系统和机器上 Selenium Grid主要使用 master-slaves或者hub-no ...
- NC23054 华华开始学信息学
题目链接 题目 题目描述 因为上次在月月面前丢人了,所以华华决定开始学信息学.十分钟后,他就开始学树状数组了.这是一道树状数组的入门题: 给定一个长度为 \(N\) 的序列 \(A\) ,所有元素初值 ...
- Swift WisdomProtocol 面向协议编程(下)
WisdomProtocol 面向协议编程(下) @[TOC] WisdomProtocol SDK 面向协议编程 # Welcome to use WisdomProtocol WisdomProt ...
- Kubernetes(k8s)使用ingress发布服务
目录 一.系统环境 二.前言 三.Kubernetes ingress简介 四.Ingress vs NodePort vs LoadBalancer 五.安装部署Nginx Ingress Cont ...
- 文字生成图像 AI免费工具第一弹 StableDiffusion
随着ChatGPT的爆火,text-to-image文字生成图像.以及更广义的AIGC(AI Generated Content)相关的话题最近一直热度不减.相信大家这几天经常会在各类的自媒体.甚至是 ...
- #PowerBi Superchange PowerBi 序言部分笔记（2）
Xmind本文思维导图 序言部分,主要讲述了BI的分类及发展,以及作者推荐的学习方法.重点是介绍了powerbi的主要四大步骤. 即: 一:数据采集 Data acquisition: Power B ...
- 如何在long-running task中调用async方法
什么是 long-running thread long-running task 是指那些长时间运行的任务,比如在一个 while True 中执行耗时较长的同步处理. 下面的例子中,我们不断从队列 ...
- 从隐私保护到AI隐私保护：隐私隐私保护的跨隐私保护治理框架实践案例
目录 标题:<从隐私保护到AI隐私保护:跨隐私保护治理框架实践案例> 背景介绍 随着人工智能技术的广泛应用,隐私保护问题也日益突出.数据隐私泄露.算法歧视等问题引发了公众的担忧和不满.为了 ...
- Linux系统运维之负载均衡Tengine
一.介绍 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.Tengine的性能和稳定性已经在大型的网站如淘宝网,天猫商城等得到 ...