您的位置：首页 > 产品设计 > UI/UE

vue实现添加删除，筛选，还有自定义全局过滤器的功能

2018-02-02 20:43 1026 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/vue.min.js"></script>
<style>
#th th{
background-color: #50a9fa;
color: aliceblue;
font-size: large;
}
</style>
</head>
<body >
<div id="app" align="center">
<input type="text" v-model="id">
<input type="text" v-model="pname">
<input type="text" placeholder="请输入条件筛选内容" v-model="sname">
<button @click="addData">添加数据</button>
<table id="th" border="1"solid width="400px">
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
<tr v-show="list.length==0">
<td colspan="4">当前列表没有任何数据</td>
</tr>
<tr v-for="item in list |filterBy sname in 'name' ">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime|datefmt}}</td>
<td>
<a href="javascript:void(0)" @click="delData(item.id)">删除</a>
</td>
</tr>
</table>
</div>
</body>
<script>
//定义全局过滤器
Vue.filter('datefmt',function (input) {
var res="";
var year=input.getFullYear();
var month=input.getMonth()+1;
var day=input.getDate();
res=year+'-'+month+'-'+day;
return res;//返回我们格式化以后的东西

});
new Vue({
el:'#app',
data:{
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}
],
id:0,
pname:"",
sname:""//自动获取到用户输入的条件筛选条件值
},
methods:{
addData:function () {
//包装成list要求的对象格式
var p={id:this.id,name:this.pname,ctime:new Date()};
//将p追加到list中
this.list.push(p);
//清空页面上的文本框中的数据
this.id=0;
this.pname="";

},
delData:function (id) {
//提醒用户是否要删除数据
if(!confirm('是否要删除数据？'))
{//当用户点击取消按钮的时候，应该阻断这个方法中的后面的代码的继续执行

return ;
}
//调用list.findIndex()方法根据传入的id获取到这个要删除的索引值
var index=this.list.findIndex(function (item) {
return item.id==id

})
//调用list.splice(元素的索引，元素的个数)
this.list.splice(index,1);
}
}
});
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航