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,连接数据库 /// & ...
随机推荐
- 打开conda环境报错：UnicodeDecodeError: ‘gbk‘ codec can‘t decode byte 0x9a in position 317: illegal multibyt
解决打开conda环境报错:UnicodeDecodeError: 'gbk' codec can't decode byte 0x9a in position 317: illegal multib ...
- Jupyter Notebook（或vscode插件） 一个cell有多个输出
方法一 在文件的开头加上如下代码,该方法仅对当前文件有效 from IPython.core.interativeshell import InteractiveShell InteractiveSh ...
- AI天后,在线飙歌,人工智能AI孙燕姿模型应用实践，复刻《遥远的歌》，原唱晴子(Python3.10)
忽如一夜春风来,亚洲天后孙燕姿独特而柔美的音色再度响彻华语乐坛,只不过这一次,不是因为她出了新专辑,而是人工智能AI技术对于孙燕姿音色的完美复刻,以大江灌浪之势对华语歌坛诸多经典作品进行了翻唱,还原度 ...
- #Powerbi 利用动态格式字符串功能，实现百分数智能缩位（powerbi4月重磅更新功能）
以下内容(基于POWERBI 23年4月更新的最新版本) 实际业务中,日常报表一般都有一个较为规范的百分数缩位要求,如果统一要求保留一位小数,那么在有些时候,我们会面临被缩成0.0%的尴尬,例如原有的 ...
- 2022-11-16：给你一个数组 nums，我们可以将它按一个非负整数 k 进行轮调， 例如，数组为 nums = [2,4,1,3,0]， 我们按 k = 2 进行轮调后，它将变成 [1,3,0,
2022-11-16:给你一个数组 nums,我们可以将它按一个非负整数 k 进行轮调, 例如,数组为 nums = [2,4,1,3,0], 我们按 k = 2 进行轮调后,它将变成 [1,3,0, ...
- get()、get_or_create()、first()、last()、latest()、earliest()、in_bulk()
get() 查询. get_or_create() 不存在时更新.存在时查询并返回. first() 获取第一笔. last() 获取最后一笔. 使用latest和earliest时需要在元数据(me ...
- 《HTML入门笔记2》
HTML常用标签 分别有:a 标签.img 标签.table 标签.form 标签.input 标签等. a 标签(特别常用) a 标签即超级链接,又叫超链接.一个网站通常由多个页面构成,进入网站时首 ...
- docker 下MySQL主从读写分离配置
主从同步机制: 同步基于耳机子机制,主服务器使用二进制来记录数据库的变动状况,从服务器通过读取和执行日志文件来保存主服务的数据一致 首先要保障主从的版本一致或相近 1 登陆docker,拉取镜像 do ...
- redis.conf 7.0 配置和原理全解，生产王者必备
5.5 redis.conf 配置详解 我是 Redis, 当程序员用指令 ./redis-server /path/to/redis.conf 把我启动的时候,第一个参数必须是redis.conf ...
- 沉痛悼念 pip search 一路走好
不知道最近大家有没有发现在使用 pip search 的时候,总是出现一个 XMLRPC 的报错. $ pip search xlrdERROR: XMLRPC request failed [cod ...