<!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>&times;</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增删改查的更多相关文章

  1. Vue 增删改查 demo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. vue 增删改查

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. mongo客户端mongo VUE增删改查

    一.先创建一张mongo表,右击已创建的数据库test,点击addcollection.. 输入Collection Name,点击ok: 二.在创建的表中新增列与数据,右击表选择Insert doc ...

  4. vue实现增删改查（内附源代码）

    VUE+Element实现增删改查 @ 目录 VUE+Element实现增删改查 前言 实验步骤 总结: 源代码 前言 &最近因为一些原因,没有更博客,昨天老师布置了一个作业,用vue实现增删 ...

  5. JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）

    前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...

  6. vue实现对表格数据的增删改查

    在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...

  7. vue的增删改查

    我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', pr ...

  8. 关于vue的增删改查操作

    利用vue也可以实现数据的增删改查,只是未涉及到数据库,只是在浏览器页面中进行操作. 将datas数组中的数据循环输出: 再增加一行,用于保存新数据,编辑数据后保存: 此时,数据已经呈现出来,开始进行 ...

  9. webpack4+express+mongodb+vue 实现增删改查

    在讲解之前,我们先来看看效果如下所示: 1)整个页面的效果如下: 2) 新增数据效果如下: 3) 新增成功如下: 4) 编辑数据效果如下: 5) 编辑成功效果如下: 6) 删除数据效果如下: 7) 删 ...

随机推荐

  1. Jquery判断其中任意一个文本框的值是否被修改

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  2. linux 自启动

    使用chkconfig命令可以查看在不同启动级别下课自动启动的服务(或是程序),命令格式如下:chkconfig --list可能输出如下:openvpn 0:关闭 1:开启 ...... 6:关闭 ...

  3. 解决：System.Data.SqlClient.SqlError: FILESTREAM 功能被禁用

    还原 AdventureWorks Sample DataBase 时遇到 FILESTREAM feature is disabled 错误提示. FileStream是SQL Server 200 ...

  4. Silverlight实例教程 - Validation客户端同步数据验证（转载）

    摘要:在Silverlight 4中,Silverlight Validation有相对的改进,本篇将介绍Silverlight 4中新加入的验证机制功能,IDataErrorInfo客户端同步验证机 ...

  5. 图像视频编码和FFmpeg(2)-----YUV格式介绍和应用

    本文不讲FFmpeg,而是讲YUV图像格式.因为摄像头拍摄出来的原始图像一般都是YUV格式.在FFmpeg中,视频是通过多张YUV图像而得到. YUV图像格式是什么,这个可以看一下维基百科.这个超链接 ...

  6. 严重: Error in dependencyCheck java.io.IOException: invalid header field（tomcat启动成功可是訪问web项目404错误）

    tomcat启动的时候出现 严重: Error in dependencyCheck java.io.IOException: invalid header field 而且tomcat也不自己主动r ...

  7. UML类图详解_聚合关系

    结合UML关系,以看台和基金来介绍聚合关系 aggregation,是一种特殊的关联关系,既有关联关系的特质,还独有“整体 —— 部分(whole —— part)”的特质. 也就是说,用之前的关联关 ...

  8. sigaction()之sa_mask

    man文档描述: sa_mask gives a mask of signals which should be blocked during execution of the signal hand ...

  9. hdu5795 A Simple Nim 求nim求法，打表找sg值规律 给定n堆石子，每堆有若干石子，两个人轮流操作，每次操作可以选择任意一堆取走任意个石子（不可以为空） 或者选择一堆，把它分成三堆，每堆不为空。求先手必胜，还是后手必胜。

    /** 题目:A Simple Nim 链接:http://acm.hdu.edu.cn/showproblem.php?pid=5795 题意:给定n堆石子,每堆有若干石子,两个人轮流操作,每次操作 ...

  10. 算法之动态规划(最长递增子序列——LIS）

    最长递增子序列是动态规划中最经典的问题之一,我们从讨论这个问题开始,循序渐进的了解动态规划的相关知识要点. 在一个已知的序列 {a1, a 2,...an}中,取出若干数组成新的序列{ai1, ai ...