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. Codeforces Round #619 (Div. 2)

    A. Three Strings 题意:给三个长度相同的非空字符串abc,依次将c中的每个字符和a或者b中对应位置的字符进行交换,交换必须进行,问能否使得ab相同. 思路:对于每一个位置,如果三个字符 ...

  2. 学习进度04（billbill长评数据提取01）

    学习了python写入csv文件自己想了一个小实战,爬取billbill<白色相簿>番剧的长评 网页是动态变化的,往下拉他才会更新出长评,找出关键链接https://api.bilibil ...

  3. Golang的进制转换实战案例

    Golang的进制转换实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.常用进制概述 1>.进制概述 进制也就是进位制,是人们规定的一种进位方法.举个例子:二进制就 ...

  4. 微服务中springboot启动问题

    log4j:WARN No appenders could be found for logger (org.springframework.web.context.support.StandardS ...

  5. Redis 详解 (七) AOF 持久化

    目录 1.AOF简介 2.AOF 配置 3.开启 AOF 4.AOF 文件恢复 5. AOF 重写 6.AOF的优缺点 上一篇文章我们介绍了Redis的RDB持久化,RDB 持久化存在一个缺点是一定时 ...

  6. [JZOJ]3413.KC的瓷器

    Description KC来到了一个盛产瓷器的国度.他来到了一位商人的店铺.在这个店铺中,KC看到了一个有n(1<=n<=100)排的柜子,每排都有一些瓷器,每排不超过100个.那些精美 ...

  7. C++ 把数组的元素乘以2在输出

    #include<iostream> using namespace std; int main(){ ] = { , , , , }; ; ; i < ; i++) { ) { s ...

  8. MSP430系列单片机笔记00

    嵌入式系统 嵌入式系统(Embedded system),是一种“完全嵌入受控器件内部,为特定应用而设计的专用计算机系统”,根据英国电气工程师协会( U.K. Institution of Elect ...

  9. 留学萌新Essay写作须知

    Essay是留学生们接触比较多的一项留学生作业,但尽管如此,依旧有部分同学对于essay写作是没有足够的把握的.随着开学季的到来,很多萌新初次接触Essay写作,难免会有很多不懂得地方.所以今天小编就 ...

  10. c++ opencv 入门

    //类型定义 CvPoint point(2, 3); CvPoint2D32f point1(2, 3); CvPoint3D32f point2(2, 3); CvSize size(2, 3); ...