vue增删改查
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{title}}</title>
<link rel="stylesheet" href="plus/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/index.css">
<script src="plus/jquery.min.js"></script>
<script src="plus/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="plus/vue.min.js"></script>
<script src="plus/axios.min.js"></script>
</head> <body>
<div class="container" id="vuechek">
<div class="row">
<div class="col-lg-12">
<form class="form-inline" id="title-form">
<div class="form-group">
<label for="title">标题</label>
<input type="text" class="form-control" id="title" v-model="title" placeholder="请输入标题">
</div>
<button type="button" class="btn btn-default" v-on:click="saveTitle">保存</button>
</form>
</div>
</div>
<div class="row">
<div class="col-lg-12 h3 text-info">章节信息</div>
</div>
<div class="row">
<div class="col-lg-8">
<table class="table table-bordered table-hover text-center">
<tr class="text-info">
<td>#</td>
<td>标题</td>
<td><span class="glyphicon glyphicon-pencil"></span></td>
</tr>
<tr class="text-center" v-for="(item, index) in titles">
<td><span v-text="index+1"></span></td>
<td>
<span v-show="xiugai || item.show" v-text="item.name"></span>
<input v-show="xiugai===false && index===currindex " type="text " v-model="item.name "></input>
</td>
<td> <button v-show="xiugai" type="button " class="btn btn-info btn-sm " v-on:click="updateMsg(index, item) ">修改</button>
<button v-show="xiugai===false && index===currindex" type="button " class="btn btn-info btn-sm " v-on:click="saveMsg(index, item.name) ">保存</button>
<button type="button" v-on:click="newIndex=index" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#layer">删除</button></td>
</tr>
<tr v-show="titles.length!=0">
<td colspan="4" class="text-right"><input type="button" @click="newIndex=-1" data-toggle="modal" data-target="#layer" value="删除全部" class="btn btn-sm btn-danger" /> </td>
</tr>
<tr>
<td colspan="4" class="text-center" v-show="titles.length==0">
暂无数据...
</td>
</tr>
</table>
</div>
</div> <!--模态框-->
<div role="dialog" class="modal fade" id="layer">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">确认删除吗？</h4>
</div>
<div class="modal-body text-right">
<button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
<button class="btn btn-danger btn-sm" v-on:click="deleteMsg(newIndex)" data-dismiss="modal">确定</button>
</div>
</div>
</div>
</div> </div>
<!--container-->
</body>
<script>
var app = new Vue({
el: '#vuechek',
data: {
title: '',
titles: [],
newIndex: -100,
currindex: -1,
xiugai: true
},
methods: {
saveTitle: function() {
axios.post('/add', {
title: this.title
})
.then(function(response) {
app.titles.push({
name: response.data,
show: true,
});
})
.catch(function(error) {
console.log(error);
});
},
deleteMsg: function(n) { // alert(n);
if (n == -1) {
this.titles.splice(0, this.titles.length);
}
this.titles.splice(n, 1);
// this.titles.splice(this.newIndex, 1); //也可以
},
saveMsg(index, item) {
this.currindex = -1;
this.xiugai = true;
console.log('我点了保存', index, item);
},
updateMsg: function(n, item) {
item.show = false;
this.currindex = n;
this.xiugai = false;
console.log('我点了 修改', this.msg);
}
}
});
</script> </html>
vue增删改查的更多相关文章
- Vue 增删改查 demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- vue 增删改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- mongo客户端mongo VUE增删改查
一.先创建一张mongo表,右击已创建的数据库test,点击addcollection.. 输入Collection Name,点击ok: 二.在创建的表中新增列与数据,右击表选择Insert doc ...
- vue实现增删改查（内附源代码）
VUE+Element实现增删改查 @ 目录 VUE+Element实现增删改查 前言 实验步骤 总结: 源代码 前言 &最近因为一些原因,没有更博客,昨天老师布置了一个作业,用vue实现增删 ...
- JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）
前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...
- vue实现对表格数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
- vue的增删改查
我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', pr ...
- 关于vue的增删改查操作
利用vue也可以实现数据的增删改查,只是未涉及到数据库,只是在浏览器页面中进行操作. 将datas数组中的数据循环输出: 再增加一行,用于保存新数据,编辑数据后保存: 此时,数据已经呈现出来,开始进行 ...
- webpack4+express+mongodb+vue 实现增删改查
在讲解之前,我们先来看看效果如下所示: 1)整个页面的效果如下: 2) 新增数据效果如下: 3) 新增成功如下: 4) 编辑数据效果如下: 5) 编辑成功效果如下: 6) 删除数据效果如下: 7) 删 ...
随机推荐
- kafka分布式搭建
kafka分布式搭建 (192.168.230.129)master (192.168.230.130)slave1 (192.168.230.131)salve2 在master.slave1.sl ...
- C++加密解密库之选择
项目中有这样一个需求,客户端登陆服务器时,为保证信息安全,需要对用户的密码进行加密传输,在服务器端接受到之后进行相应的解密. 一.加密算法分类 对称加密算法.不对称加密算法.不可逆加密算法 1.对称加 ...
- script 标签里的 async 和 defer
无 async 和 defer 浏览器立即加载并执行指定脚本(读到即加载并执行),阻塞文档解析 async 脚本的加载执行和文档的加载渲染 并行. defer 脚本的加载和文档的加载渲染并行,但脚本的 ...
- cnetos 6.7彻底解决vmware NAT网络问题
cnetos 6.7彻底解决vmware NAT网络问题 vmnet8在nat时使用 vmnet1 在桥接时使用 *解决Windows不能ping通linux的问题 vmnet8相当于一个网卡,虚 ...
- ServletContext与Web应用以及Spring容器启动
一.ServletContext对象获取Demo Servlet容器在启动时会加载Web应用,并为每个Web应用创建唯一的ServletContext对象. 可以把ServletContext看作一个 ...
- 计算 24 点是一种扑克牌益智游戏，随机抽出 4 张扑克牌，通过加 (+) ，减 (-) ，乘 ( * ), 除 (/) 四种运算法则计算得到整数 24 ，本问题中，扑克牌通过如下字符或者字符串表示，其中，小写 joker 表示小王，大写 JOKER 表示大王：
include "stdafx.h" #include <iostream> #include <fstream> #include <string& ...
- 【转】Android自动化测试(UiAutomator)——UiObject
本文主要讲解使用UiAutomator的一些技巧,希望对于初学者有一定的帮助 UiObject 1.首先要声明对象 UiObject XXX = new UiObject(new Selector) ...
- Java中常见数据结构
1:集合 Collection(单列集合) List(有序,可重复) ArrayList 底层数据结构是数组,查询快,增删慢 线程不安全,效率高 Vector 底层数据结构是数组,查询快,增删慢 线程 ...
- Spring4 MVC表单验证
在这篇文章中,我们将学习如何使用Spring表单标签, 表单验证使用 JSR303 的验证注解,hibernate-validators,提供了使用MessageSource和访问静态资源(如CSS, ...
- 创建一个动作-Action类:
让我们创建一个Java文件HelloWorldAction.java的Java资源> SRC下一个的包名com.yiibai.struts2与下面的内容. package com.yiibai. ...