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. mybaits-plus总结

    import java.math.BigDecimal; import java.util.Arrays; import java.util.Date; import java.util.List; ...

  2. springboot启动总是启动不起来UnsatisfiedDependencyException异常

    采用debug模式启动总是停留在 点击后: 鼠标放在ex上: org.springframework.beans.factory.UnsatisfiedDependencyException: Err ...

  3. 安装redis cluster时：undefined method `invoke_with_build_args' for nil:NilClass

    gem install -l redis-3.3.3.gem ERROR: Loading command: install (LoadError) cannot load such file -- ...

  4. GLConsole的编译和使用

    1.在CVars文件中搜索tinyxml,去掉所有tinyxml的编译选项 2.Add the following line to the "CMakeLists.txt" fil ...

  5. idea中使用maven运行wordcount代码

    1.创建maven项目 pom文件: <?xml version="1.0" encoding="UTF-8"?> <project xmln ...

  6. apache flink源码挖坑 (未完待续)

    Apache Flink 源码解读(一) ​ By yyz940922原创 项目模块 (除去.git, .github, .idea, docs等): flink-annotations: flink ...

  7. python-arp 被动信息收集

    python-arp 被动信息收集 概述 横向移动的时候由于局域网中可能存在未分配的IP,如果请求这些未分配的IP可能导致被发现(旁路检测设备),先可以做一下arp被动信息收集.当然对蜜罐类设备没用. ...

  8. Spring开发环境搭建（Eclipse）

    开发环境搭建,主要包含2部分: Java安装 Eclipse安装 为易于学习,我们只安装这2个部分,对于一般开发学习也足够了.如果你有其他要安装的,酌情添加. Java安装 我们使用Java8: 下载 ...

  9. 修改element-ui里table中悬浮框中三角号的颜色及透明度设置

    .el-tooltip__popper,.el-tooltip__popper.is-dark{background:rgba(0,0,0,0.6) !important;} .el-tooltip_ ...

  10. 使用jackson转换类型时报Unrecognized field

    调用 objectMapper.convertValue(obj, valueType ); 时报错 原因 obj 的属性多于 valueType 导致,添加一条语句即可 objectMapper.c ...