vue  写假后台  bootstrap 做的样式

代码

<!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>

    <script src="vue-dev/dist/vue.js"></script>

    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">

</head>

<body>

<div id="app">

    <div class="panel panel-primary">

        <div class="panel-heading">

            <h3 class="panel-title">添加</h3>

        </div>

        <div class="panel-body form-inline">

            <label>

                Id:

            </label>

            <input type="text" class="form-control" v-model="id">

            <label>

                Name:

            </label>

            <input type="text" class="form-control" v-model="name">

            <button type="button" class="btn" @click="add">添加</button>

            <button type="button" class="btn" @click="update">修改</button>

        </div>

    </div>

    <table class="table table-hover table-bordered table-striped">

        <thead>

        <tr>

            <th>Id</th>

            <th>Name</th>

            <th>Ctime</th>

            <th>Operation</th>

                    </tr>

        </thead>

        <tbody>

        <tr v-for="(item) in list">

            <td>{{item.id}}</td>

            <td>{{item.name}}</td>

            <td>{{item.ctime}}</td>

            <td><button type="button" class="btn btn-info" @click="bind(item.id)">修改</button>

                <button type="button" class="btn btn-warning" @click="del(item.id)">删除</button>

            </td>

        </tr>

        </tbody>

    </table>

</div>

<script>

    let vm=new Vue({

        el:'#app',//当前我们Vue实例 要控制的标签

        data:{//数据

            id:'',

            name:'',

            index:'',//用于修改

            list:[

                { id:'1', name:'宝马', ctime:new Date()},

                { id:'2', name:'奥迪', ctime:new Date()},

                { id:'3', name:'大众', ctime:new Date()},

                { id:'4', name:'奔驰', ctime:new Date()}

            ]

        },

        methods:{

            add(){

                this.list.push({id:this.id,name:this.name, ctime:new Date()})

                this.id=this.name=''

            },

            update(){

                if (this.index==""){

                    alert('未选择数据')

                    return

                }

                // 找到索引

                this.list[this.index].id=this.id

                this.list[this.index].name=this.name

                this.list[this.index].ctimec=new Date()

                this.id=this.name=this.index=''

            },

            bind(id){

                //根据id 找索引

                this.list.some((item,i)=>{

                    if (item.id==id){

                        this.id=item.id;

                        this.name=item.name

                        this.index=i

                        alert(i)

                        return true;

                    }

                })

            },

            del(id){

                //根据id找索引

               let index= this.list.findIndex(item =>{

                   if (item.id==id){

                       return true

                   }

               })

                //删除数组元素

                this.list.splice(index,1)

            }

        }

    })

</script>

</body>

</html>

　　

总结：

还可以 bootstarp 还不熟练     好用是真的  一起666666

Vue.js——3.增删改查的更多相关文章

  1. ABP+NetCore+Vue.js实现增删改查

    ABP我就不多介绍了,不知道的可以自己百度 本篇开发工具VS2017,数据库SQL SERVER2012,系统Win7 1.去ABP官网下载对应的模板,下载地址:https://aspnetboile ...

  2. 60分钟课程： 用egg.js实现增删改查,文件上传和restfulApi, webpack react es6 （一）

    今天开始我将写nodejs框架egg.js, react 实现的增删改查,文件上传等常用的b/s场景,这个将分3部分来写. 会让你在60分钟内快速 入口并应用~  你应该用es6, node,或是ph ...

  3. 一起学Vue：CRUD(增删改查)

    目标 使用Vue构建一个非常简单CRUD应用程序,以便您更好地了解它的工作方式. 效果页面 比如我们要实现这样列表.新增.编辑三个页面: 列表页面 新增页面 编辑页面 我们把这些用户信息保存到Todo ...

  4. Vue+element基本增删改查

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

  5. JS的增删改查

    1.查 <script type="text/javascript"> /** * 查找 已经在html代码中存在的元素 */ /** * document.getEl ...

  6. Vue表格数据增删改查及搜索

    <div id="app"> <div class="item"> <span class="name"> ...

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

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

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

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

  9. Node.js + MySQL 实现数据的增删改查

    通过完成一个 todo 应用展示 Node.js + MySQL 增删改查的功能.这里后台使用 Koa 及其相应的一些中间件作为 server 提供服务. 初始化项目 $ mkdir node-cru ...

随机推荐

  1. Linux镜像源 国内列表

    (一).企业站 1.搜狐:http://mirrors.sohu.com/ 2.网易:http://mirrors.163.com/ 3.阿里云:http://mirrors.aliyun.com/ ...

  2. tomcat端口号被占用，且杀进程不能够杀掉解决办法

    在电脑上安装了zookeeper以后,配置好tomcat启动发现端口号8009端口号被占用,报错如下: 采用netstat –ano 查询所有进程查看或者根据端口号查进程netstat -ano |f ...

  3. xml配置文件解释

    XML 指可扩展标记语言(EXtensible Markup Language) xmlns:是指XML命名空间 ( XML Namespace ) XSD是指XML结构定义 ( XML Schema ...

  4. 洛谷 三月月赛 B

    搞出每一位与前一位的差,然后区间修改只是会影响区间的端点,所以只修改一下端点的值就好. %%%高一神犇线段树 #include<bits/stdc++.h> #define N 10000 ...

  5. APIO 2010 特别行动队 斜率优化DP

    Description 你有一支由 n 名预备役士兵组成的部队,士兵从 1 到 n 编号,要将他们拆分 成若干特别行动队调入战场.出于默契的考虑,同一支特别行动队中队员的编号 应该连续,即为形如 (i ...

  6. 错误：selenium.common.exceptions.SessionNotCreatedException: Message: Unable to find a matching set of capabilities

    错误再现 原因:firefox浏览器版本和浏览器驱动版本不匹配 解决办法:卸载高版本浏览器,安装低版本浏览器

  7. vue左侧菜单的实现

    后端实现 django视图def menu(request): menu_list = models.Menu.objects.all().values('id', 'menu_name', 'par ...

  8. BurpSuite详解

    转载自:http://www.nxadmin.com/tools/689.html 本文由阿德马翻译自国外网站,请尊重劳动成果,转载注明出处 Burp Suite是Web应用程序测试的最佳工具之一,其 ...

  9. POJ 1039：Pipe 计算几何

    Pipe Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 9773   Accepted: 2984 Description ...

  10. 【pwnable.kr】 flag

    pwnable从入门到放弃 第四题 Download : http://pwnable.kr/bin/flag 下载下来的二进制文件,对着它一脸懵逼,题目中说是逆向题,这我哪会啊... 用ida打开看 ...