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线程中断机制
在阅读AQS源码以及juc包很多基于AQS的应用源码过程中,会遇到很多interrupted相关的方法,这里复习一下java线程中断相关. 要点:使用interrupt()中断一个线程,该方法只是标记 ...
- Spring Boot 整合邮件服务
参考教程 首先参考了 Spring Boot整合邮件配置,这篇文章写的很好,按照上面的操作一步步走下去就行了. 遇到的问题 版本配置 然后因为反复配置版本很麻烦,所以参考了 如何统一引入 Spring ...
- C#处理医学影像(四):基于Stitcher算法拼接人体全景脊柱骨骼影像
在拍摄脊柱或胸片时,经常会遇到因设备高度不够需要分段拍摄的情况, 对于影像科诊断查阅影像时希望将分段影像合并成一张影像,有助于更直观的观察病灶, 以下图为例的两个分段影像: 我们使用Ope ...
- ai问答：使用 Vue3 组合式API 和 TS 封装 websocket 断线重连
这是一个使用 Vue3 组合式 API 和 TS 封装 websocket 的例子 这个组件在 setup 中: 创建了一个 WebSocket 连接 定义了 sendMessage 方法发送消息 监 ...
- 【已解决】使用代理后，登陆微软账号提示0x800190001
今天晚上想要登录Onedrive同步文件时,发现怎么都登陆不上去,报出的错误代码是0x80190001,在网上搜索了各种方法,重置网络,重置Onedrive都没什么用,甚至把Onedrive重装了一遍 ...
- Nuxt3.0中使用EChart可视化图表📊
在Nuxt3.0项目中用到了可视化图表,于是我用了EChart可视化图表库.但是在官网我没有找到针对在Nuxt3.0中使用EChart的方法,于是在这里记录我的引入EChart并简单使用的步骤.需要声 ...
- 2022-01-16：小明手中有n块积木，并且小明知道每块积木的重量。现在小明希望将这些积木堆起来， 要求是任意一块积木如果想堆在另一块积木上面，那么要求： 1.上面的积木重量不能小于下面的积木重量；
2022-01-16:小明手中有n块积木,并且小明知道每块积木的重量.现在小明希望将这些积木堆起来, 要求是任意一块积木如果想堆在另一块积木上面,那么要求: 1.上面的积木重量不能小于下面的积木重量: ...
- 给你安利一款国产良心软件uTools
前言 大家好,我是xiezhr 最近由于换了新电脑,也是在各种折腾搭建开发环境,安装各种常用软件.今天呢给大家安利一款你可能没用过的国产良心软件uTools,这也是我刚刚拿到电脑后安装的第一款软件吧. ...
- ChatGPT 推出 iOS 应用，支持语音输入，使用体验如何？
最近,OpenAI 宣布推出官方 iOS 应用,允许用户随时随地访问其高人气 AI 聊天机器人,此举也打破了近几个月内苹果 App Store 上充斥似是而非的山寨服务的窘境. 该应用程序是 Chat ...
- 【实践篇】领域驱动设计：DDD工程参考架构
背景 为什么要制定参考工程架构 不同团队落地DDD所采取的应用架构风格可能不同,并没有统一的.标准的DDD工程架构.有些团队可能遵循经典的DDD四层架构,或改进的DDD四层架构,有些团队可能综合考虑分 ...