<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <script src="../libs/vue1026.js"></script>

    </head>

    <style>

        #app {

            width: 800px;

            margin: 20px auto;

        }

        #tb {

            width: 800px;

            border-collapse: collapse;

            margin: 20px auto;

        }

        #tb th {

            background-color: #0094ff;

            color: white;

            font-size: 16px;

            padding: 5px;

            text-align: center;

            border: 1px solid black;

        }

        #tb td {

            padding: 5px;

            text-align: center;

            border: 1px solid black;

        }

    </style>

    <body>

        <div id="app">

            <input type="text" v-model="name">

            <button @click="addData">添加数据</button><br>

            <input type="text" placeholder="请输入筛选内容" v-model="uname">

            <table id="tb">

                <tr>

                    <th>编号</th>

                    <th>名称</th>

                    <th>时间</th>

                    <th>操作</th>

                </tr>

                <tr v-if="list.length==0">

                    <td colspan="4">当前已经没有数据</td>

                </tr>

                <tr v-for="item in list | filterBy uname in 'name'">

                    <td>{{$index+1}}</td>

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

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

                    <td><a href="javascript:;" @click="remove($index)">删除</a></td>

                </tr>

            </table>

        </div>

    </body>

    <script>

        new Vue({

            el:'#app',

            data:{

                list:[

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

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

                ],

                name:'',

                uname:''

            },

            methods:{

                addData:function(){

                    var str = {name:this.name,ctime:new Date()};

                    this.list.push(str);

                    this.name="";

                },

                remove:function(id){

                this.list.splice(id,1)

                }

            }

        })

    </script>

</html>

用vue写添加数据、删除数据、筛选数据表格的更多相关文章

  1. 原生js实现类的添加和删除,以及对数据的add和update、view ，ajax请求 ，页面离开的操作

    1 类操作 function hasClass(cla, element) { if(element.className.trim().length === 0) return false; var ...

  2. Vue实现添加、删除、关键字查询

    从今天开始,将不定期更新关于 Vue 的学习以及各种方法的使用,好了,下面就开始吧 Vue的实例创建首先需要我们引入一个vue.js(也可以在本地npm安装vue,我为了省事就...),然后在HTML ...

  3. vue中添加与删除，关键字搜索

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

  4. vue实现添加与删除图书

    先放大图,当我们点击删除的时候,图书名单就会被我们删掉.当我们重新添加回来或者添加新书的时候,我们只需要在添加新书这里添加即可. 当我点击删除的时候,只需要的就是除却删除的那一个书籍之后剩下的图书. ...

  5. dojo Datagrid 实现数据删除功能

    DataGrid实现数据动态刷新功能见前一个帖子:http://www.cnblogs.com/qq552048250/p/4447103.html 实现数据删除只需要向表格中动态添加按钮,并为按钮的 ...

  6. 删除MySQL重复数据

    删除MySQL重复数据 项目背景 在最近做的一个linux性能采集项目中,发现线程的程序入库很慢,再仔细定位,发现数据库里面很多冗余数据.因为在采集中,对于同一台设备,同一个时间点应该只有一个数据,然 ...

  7. Oracle的学习二：表管理(数据类型、创建/修改表、添加/修改/删除数据、数据查询)

    1.Oracle表的管理 表名和列名的命名规则: 必须以字母开头: 长度不能超过30个字符: 不能使用oracle的保留字: 只能使用如下字符:A-Z, a-z, 0-9, $, # 等. Oracl ...

  8. SQL Server 数据的添加修改删除和查询

    数据的添加: 首先建立一个数据库,点击新建查询,然后用代码建立一个表,表里写上列名和数据类型,约束可加可不加 然后使用insert语句往表里添加数据 insert [into] 表名 (列名1,列名2 ...

  9. vue-resource实现数据的绑定、添加、删除

    vue-resource实现数据的绑定.添加.删除 <!DOCTYPE html> <html lang="en"> <head> <ti ...

随机推荐

  1. Ubuntu命令模式基础

    Ubuntu是一个自由.开源.基于Debian的Linux发行版.在ubuntu的基础上,又衍生其它各具特色的Linux发行版.首先是一个操作系统,操作系统用于管理电脑硬件.要发挥出电脑的作用,还得依 ...

  2. Python 编码错误的本质原因

    转载自:https://foofish.net/python-unicode-error.html 不论你是有着多年经验的 Python 老司机还是刚入门 Python 不久的新贵,你一定遇到过Uni ...

  3. SharePoint 2016 每天预热脚本介绍

    使用SharePoint的朋友们应该知道,SharePoint每天夜里有自动回收的机制,使环境每天把占用的内存都释放出来,以确保不会累计占用过多内存导致服务器崩溃. 我们可以打开IIS,选中我们的应用 ...

  4. work1-英语辅导班在线报名系统

    作品简述: 这是一个英语辅导班在线报名系统,目的是提供一个供学生报名辅导班的平台,也同时为老师收集报名信息提供便利. 使用的语言: php+html+js 服务器: 新浪sae服务器,apache 数 ...

  5. 青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步

    Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,&quo ...

  6. Ext TabPanel tabbar添加按钮

    tabPanel tabbar添加按钮 this.tabPanel = Ext.create('Ext.tab.Panel', { tabBar:{ items:[{ //组件靠右 xtype: 't ...

  7. Linux进程/内核模型

    内核必须实现一组服务和相应的接口,应用程序则可以使用这些接口,而不是直接与硬件打交道. Linux内核主要由以下5个子系统组成:进程调度.内存管理.虚拟文件系统.进程间通信以及设备驱动. 在这个组成中 ...

  8. [图形学] 习题8.6 线段旋转后使用Cohen-Sutherland算法裁剪

    习题8.6 生成一条比观察窗口对角线还长的线段动画,线段重点位于观察窗口中心,每一帧的线段在上一帧基础上顺时针旋转一点,旋转后用Cohen-Sutherland线段裁剪算法进行裁剪. 步骤: 1 视口 ...

  9. Bash : 索引数组

    Bash 提供了两种类型的数组,分别是索引数组(indexed array)和关联数组(associative array).本文主要介绍索引数组的基本用法. 索引数组的基本特点 Bash 提供的数组 ...

  10. JDBC相关知识

    一.连接数据库 1. 步骤 //1.创建一个Driver实现类的对象 Driver driver = new com.mysql.jdbc.Driver();//注意抛异常 //2.准备 url 和 ...