<td>{{item.time|dateFormat('yyyy-mm-dd hh:mm:ss')}}</td>
//全局过滤器,进行时间的格式化
Vue.filter('dateFormat',function(datastr,patter){
var dt=new Date(datastr);
//yyyy-mm-dd
var y=dt.getFullYear();
var m=(dt.getMonth()+1).toString().padStart(2,'0');
var d=dt.getDate().toString().padStart(2,'0');
if (patter.toLowerCase()==='yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else{
//padStart(maxlength,fillstring) 用来填充字符串 ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()
用于头部补全 第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。
var hh=dt.getHours().toString().padStart(2,'0');
var mm=dt.getMinutes().toString().padStart(2,'0');
var ss=dt.getSeconds().toString().padStart(2,'0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/vue2019.js" ></script>
<style>
#app {
width: 70%;
margin: 10px auto;
}
.tb {
border-collapse: collapse;
width: 100%;
}
.tb th {
background-color: #0094ff;
color: white;
}
.tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
}
.add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
<body>
<div id="app">
编号:<input v-model="id" name="id" type="text"/>
品牌名称:<input v-model="name" name="name" type="text"/><button @click="add">添加</button>
<br />
品牌名称:<input v-model="soso" name="cat" placeHolder="请输入筛选内容" type="text"/>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-for="item in search(soso)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time|dateFormat}}</td>
<td><a href="javascript:void(0)" v-on:click="delte(item.id)">删除</a></td>
</tr>
</table>
</div>
</body>
<script>
//全局过滤器,进行时间的格式化
Vue.filter('dateFormat',function(datastr){
var dt=new Date(datastr);
//yyyy-mm-dd
var y=dt.getFullYear();
var m=dt.getMonth()+1;
var d=dt.getDate();
return `${y}-${m}-${d}`;
})
var vm=new Vue({
el:'#app',
data:{
id:'1',
name:'',
soso:'',
list:[{"id":1,"name":"大黄蜂","time":new Date()},
{"id":2,"name":"奔驰","time":new Date()}
]},
methods:{
add:function(){
this.list.push({"id":this.id,"name":this.name,"time":new Date()})
},
delte:function(id){
if(!confirm("确定要删除吗?")){
return ;
}
// 默认去遍历list集合,将集合中的每个元素传入到function的item里,
var index=this.list.findIndex(function(item){
return item.id==id;
})
this.list.splice(index,1);
},
//根据关键字实现数组的过滤
search:function(soso){
var newList=[];
this.list.forEach(item=>{
if(item.name.indexOf(soso)!=-1){
newList.push(item)
}
})
console.log(newList)
return newList;
}
}
})
</script>
</html>
效果: