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. POJ2533：Longest Ordered Subsequence

    Longest Ordered Subsequence Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 37454   Acc ...

  2. Windows按键消息—虚拟键码（转）

    源地址:http://c.biancheng.net/cpp/html/1253.html 虚拟键码保存在WM_KEYDOWN.WM_KEYUP.WM_SYSKEYDOWN和WM_SYSKEYUP消息 ...

  3. 三十九、SAP中多语言的处理

    一.点击菜单翻译 二.选择目标语言 三.输入需要翻译的内容,并保存 四.我们切换到英语模式登录 五.查看我们的代码 六.输出结果如下,多语言特征就显示了

  4. 8. Redis 持久化对生产环境的灾难恢复的意义

    1.故障发生的时候会怎么样2.如何应对故障的发生 很多同学,自己也看过一些redis的资料和书籍,当然可能也看过一些redis视频课程 所有的资料,其实都会讲解redis持久化,但是有个问题,我到目前 ...

  5. vnpy交易学习接口(2)

    #来源于github下载vnpy版本  20180413 11.多投资标的情况下,该如何修改? 10.stop和limit报单有什么区别呢? 在交易时用得最多的是二类定单,第一类是市价单(Market ...

  6. Egret - EUI - 隐藏滚动条

    <e:Skin> <e:VScrollBar autoVisibility="false" visible="false"/> < ...

  7. EUI库 - 容器

      eui.UILayer UILayer是Group的子类它只有一个功能,到放到场景上后,宽高永远和场景宽度一致   Group Group 是自动布局的容器基类.如果包含的子项内容太大需要滚动显示 ...

  8. VS 2017 没有工具栏中没有Report Viewer的解决方案

    安装 控件 Install-Package Microsoft.ReportingServices.ReportViewerControl.WinForms -Pre “工具”>“Nuget包管 ...

  9. spring 官方文档-片段学习——webflux-ann-controller

    spring 官方文档-片段学习总结 片段所在连接:https://docs.spring.io/spring/docs/5.0.4.RELEASE/spring-framework-referenc ...

  10. SQL left join、rignt join、inner join区别

    说真的一直对数据库没有研究以至于连这些基础都不会了,事实证明,业精于勤荒于嬉. 废话不多说,直接开始 有A.B两张表: 1.inner join inner join 和 join 是没有区别的(如有 ...