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>&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>
时间: 2024-10-09 17:01:54

vue增删改查的相关文章

vue的增删改查

我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '[email protected]', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'bbbbb', email: '[email protected]', sex: '女', province: '河北省', hobby: ['弹琴', '读书', '插画

vue实战(一):利用vue与ajax实现增删改查

vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> <%@ include file="../commons/taglib.jsp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.

关于vue的增删改查操作

利用vue也可以实现数据的增删改查,只是未涉及到数据库,只是在浏览器页面中进行操作. 将datas数组中的数据循环输出: 再增加一行,用于保存新数据,编辑数据后保存: 此时,数据已经呈现出来,开始进行一系列的操作:sava: 通过v-model将在最后一行填写的数据传输到piece中,然后改变this.piece的id,存入datas数组中. deleted: 获得要删除该行的id,利用循环在数组datas中找到与id对应的i,使用数组的splice(i,1)方法,将该行数据删除. editor

Vue电商后台管理系统项目第5篇-角色列表的增删改查&amp;&amp;角色授权

角色列表的增删改查 1.添加角色 先根据API文档编写接口: // 添加角色 export const addRolesApi = (data) => { return axios({ method: 'post', url: 'roles', data }) } 在角色组件内引用,然后给 添加角色 按钮绑定一个点击事件addRolesClick: <!-- 添加角色 --> <el-button type="success" plain @click=&quo

vue+express+mongodb 实现 增删改查

一.创建一个vue项目 用脚手架vue-cli搭建一个项目,数据请求用axios方式,写几个按钮用来调接口(vue这块不做多解释,不懂的可以先去官网学习vue-cli:https://cli.vuejs.org/zh/guide/cli-service.html   axios:http://www.axios-js.com/) 注意点:在用axios调用接口的时候会产生跨域,所以有配置下:在vue项目根目录下打开config文件夹下的index.js文件中proxyTable中加入配置内容 p

VUE2.0增删改查附编辑添加model(弹框)组件共用

Vue实战篇(增删改查附编辑添加model(弹框)组件共用) 前言 最近一直在学习Vue,发现一份crud不错的源码 预览链接 https://taylorchen709.github.io/vue-admin/#/login 自己下载下来后仔细研究了起来,发现编辑和增加写了两个弹框,我觉得这不符合vue的组件原则,于是自己把编辑和添加改成共用的 因为也是纯粹的写写前端页面,所以数据方面用的是mock.js,真实的模拟请求. 这个项目用到的 技术栈: vue + webpack + vuex +

ListCode增删改查代码生成器介绍

1. 简介 listcode 是一个增删改查代码在线生成工具.主要提供java,python,php,nodejs等常见语言和框架的 CRUD代码生成服务(即 常见的增删改查),后台代码.前端界面.js等,一站解决. 相比于传统的增删改查代码生成器,ListCode 做了很多完善, 不论从功能的丰富程度,还是支持的语言.技术框架种类上都有了很大进步,可以很大的提高开发效率,减少人工介入修改的工作量. 功能特点: 前后端代码.js.UI一站生成 翻页,多条件联合查询 外键关联编辑.展示 输入验证,

SpringBoot-Vue实现增删改查及分页小DEMO

前言 主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo,实现增删改查.分页功能以及了解Springboot搭配vue完成前后端分离项目的开发流程. 开发栈 前端 开发工具:WebStorm 开发框架:vue + axios 包管理工具: npm 打包工具:webpack 后端 开发工具:IDEA 开发框架:Springboot + mybatis 打包工具:maven 数据库: MySQL PS:假设以上的的工具你都安装好啦,写CRUD小DEMO时进坑了,这篇

Java springboot之Mongodb增删改查

1.添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-mongodb</artifactId> <version>2.1.6.RELEASE</version> </dependency> 完整pom.xm文件 <?xml version="1.0&