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. CAN通讯基本设置

    A节点pelican协议下,扩展帧 单滤波方式 A节点的接收滤波器 ID号 设置为 0x19881205 设置过程 (1) pelican模式设置 设置时钟分频寄存器CDR.7 =1 使SJA1000 ...

  2. 更换虚拟机VMware Workstation14和centos7版本及工具

    本博主之前一直沿用的centos是6.7比较老,工作站是10,想要更换一批新版本的工具,并将之前的一些开发环境整理出来移动到该版本上,将其记录在下 一.下载准备 1.下载centos7镜像,选择最小的 ...

  3. .Net 经典案例

    1.捕捉一只小可爱 using System; using System.Collections.Generic; using System.Linq; using System.Text; usin ...

  4. 逆战：微信小程序

                                                            微信小程序的生命周期 onLaunch: function(options) { // ...

  5. 二十二、SAP中创建一个内表，并添加内容循环输出显示

    一.直接上代码 二.输出如下

  6. Power BI Premium

    Power BI Premium的设计是为了满足拥有大量数据的大公司的需求.微软已经重新构建了Power BI的架构,以允许大量的“只读”用户.Premium用户还可以利用很多新功能. Power B ...

  7. spark集群硬件建议

    ps:硬件配置其实都是根据实际的情况的,没有说某种配置就可以套在各种场景上 大部分spark 任务都是要到外部存储系统去读取数据源,比如hdfs,hbase等等,让spark计算尽可能近的数据源是很重 ...

  8. 吴裕雄--天生自然C++语言学习笔记：C++ 接口（抽象类）

    接口描述了类的行为和功能,而不需要完成类的特定实现. C++ 接口是使用抽象类来实现的,抽象类与数据抽象互不混淆,数据抽象是一个把实现细节与相关的数据分离开的概念. 如果类中至少有一个函数被声明为纯虚 ...

  9. linux常用命令-关机、重启

    常用命令-关机.重启 命令 含义 reboot 重新启动操作系 shutdown –r now 重新启动操作系统,shutdown会给别的用户提示 shutdown -h now 立刻关机,其中now ...

  10. 学习spring的第三天

    1.手动的依赖注入出了昨天所讲的利用<property>和<constructor-arg>标签设置注入外还可以通过属性值设置,这样就少些了一些代码... 1.1:直接在< ...