用vue写添加数据、删除数据、筛选数据表格
<!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写添加数据、删除数据、筛选数据表格的更多相关文章
- 原生js实现类的添加和删除,以及对数据的add和update、view ,ajax请求 ,页面离开的操作
1 类操作 function hasClass(cla, element) { if(element.className.trim().length === 0) return false; var ...
- Vue实现添加、删除、关键字查询
从今天开始,将不定期更新关于 Vue 的学习以及各种方法的使用,好了,下面就开始吧 Vue的实例创建首先需要我们引入一个vue.js(也可以在本地npm安装vue,我为了省事就...),然后在HTML ...
- vue中添加与删除,关键字搜索
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue实现添加与删除图书
先放大图,当我们点击删除的时候,图书名单就会被我们删掉.当我们重新添加回来或者添加新书的时候,我们只需要在添加新书这里添加即可. 当我点击删除的时候,只需要的就是除却删除的那一个书籍之后剩下的图书. ...
- dojo Datagrid 实现数据删除功能
DataGrid实现数据动态刷新功能见前一个帖子:http://www.cnblogs.com/qq552048250/p/4447103.html 实现数据删除只需要向表格中动态添加按钮,并为按钮的 ...
- 删除MySQL重复数据
删除MySQL重复数据 项目背景 在最近做的一个linux性能采集项目中,发现线程的程序入库很慢,再仔细定位,发现数据库里面很多冗余数据.因为在采集中,对于同一台设备,同一个时间点应该只有一个数据,然 ...
- Oracle的学习二:表管理(数据类型、创建/修改表、添加/修改/删除数据、数据查询)
1.Oracle表的管理 表名和列名的命名规则: 必须以字母开头: 长度不能超过30个字符: 不能使用oracle的保留字: 只能使用如下字符:A-Z, a-z, 0-9, $, # 等. Oracl ...
- SQL Server 数据的添加修改删除和查询
数据的添加: 首先建立一个数据库,点击新建查询,然后用代码建立一个表,表里写上列名和数据类型,约束可加可不加 然后使用insert语句往表里添加数据 insert [into] 表名 (列名1,列名2 ...
- vue-resource实现数据的绑定、添加、删除
vue-resource实现数据的绑定.添加.删除 <!DOCTYPE html> <html lang="en"> <head> <ti ...
随机推荐
- 让gdb能打印C++中的容器类型
由于原生的gdb对vector,map等容器的支持不太好,所以找到了一个工具,将这个工具集成到gdb中,就可以实现map,vector等容器的内容的打印操作. 1.用vim将下方的代码拷贝到一个新的文 ...
- 无法为具有固定名称“MySql.Data.MySqlClient”的 ADO.NET 提供程序加载在应用程序配置文件中注册的实体框架提供程序类型“MySql.Data.MySqlClient.MySqlProviderServices,MySql.Data.Entity.EF6”
"System.InvalidOperationException"类型的未经处理的异常在 mscorlib.dll 中发生 其他信息: 无法为具有固定名称"MySql. ...
- php中的命名空间
a.php <?php namespace a\b; class Apple{ function get_info(){ echo 'aaa'.'<br/>'; } } ?> ...
- Quartz使用-入门使用
注:这里使用的是Quartz1.6.5版本(包:quartz-1.6.5.jar) //测试main函数 //QuartzTest.java package quartzPackage; import ...
- Linux中FTP服务器的搭建
vmware12上安装的CentOs6.8,最终实现物理机上的windows10能正常访问CentOs上的FTP服务器. 一.查看是否安装有ftp相关的安装包. # rpm -qa | grep vs ...
- Jquery(一) 初识Jquery,简单使用Jquery。
距离上一篇博文好像隔了很久的时间了额.好像是堕落了一阵子,前些时间去杭州找工作,被租房的事情给搞懵逼了,然后就回来了,回来在修炼一个月在出去奋斗把!加油,这两天把jquery,easyui和boots ...
- LaTeX初识 新手入门 Texlive和Texmaker学习
转载自:http://blog.sina.com.cn/s/blog_90444ed201016iq6.html http://blog.csdn.net/zb1165048017/article/d ...
- 【LeetCode】138. Copy List with Random Pointer
题目: A linked list is given such that each node contains an additional random pointer which could poi ...
- html网页的兼容性和css优先级
网页不仅是在一个浏览器上显示的网页,也要多考虑其他浏览器的兼容性,火狐.谷歌.搜狗等浏览器总体来说,网页的变化不大,最主要的是还是IE浏览器. color:red\9; IE6 IE7 IE8 ...
- react系列从零开始-react介绍
react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...