vue时间格式化控件关于vue设置时间格式( 二 ) _知识分享

显示时分秒??有时我们显示Date类型数据的时候，我们希望能够把时分秒也给显示出来，这时为了灵活点我们可以通过参数来动态设置。

文章插图
在这里插入图片描述
调用过滤器的时候传递参数

文章插图
在这里插入图片描述
效果

文章插图
在这里插入图片描述
最后完成代码
【vue时间格式化控件关于vue设置时间格式】

<!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>Document</title><script src=https://www.fajihao.com/"./lib/vue-2.4.0.js\"></script><link rel=\"stylesheet\" href=https://www.fajihao.com/"./lib/bootstrap-3.3.7.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:<input type=\"text\" class=\"form-control\" v-model=\"id\" ></label><label>Name:<input type=\"text\" class=\"form-control\" v-model=\"name\"></label><input type=\"button\" value=https://www.fajihao.com/"添加\"class=\"btn btn-primary\" @click=\'add\'><label>搜索名称关键字：<input type=\"text\" class=\"form-control\" v-model=\"keywords\"></label></div></div><table class=\"table table-bordered table-hover table-striped\"><thead><tr><th>id</th><th>name</th><th>cTime</th><th>操作</th></tr></thead><tbody><tr v-for=\"item in search(keywords)\" :key=\"item.id\"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime | msgDateFormat(\'yyyy-mm-dd hh-mi-ss\') }}</td><td><a href=https://www.fajihao.com/"\" @click.prevent=\"del(item.id)\">删除</a></td></tr></tbody></table></div><script>var vm = new Vue({el: \"#app\",data: {id:\'\',name:\'\',keywords:\'\',list:[{id:1,name:\'奔驰\',ctime:new Date()},{id:2,name:\'宝马\',ctime:new Date()}]},methods: {add(){// 添加记录到list中this.list.push({id:this.id,name:this.name,ctime:new Date()})// 将输入框置空this.id=this.name=\'\'},del(id){// some方法循环数组,返回true可以终止循环// this.list.some((item,i) =>{//if(item.id == id){// 移除记录 1 移除一条记录//this.list.splice(i,1);// 返回true 终止循环//return true;//}//})// 通过findIndex方法获取要删除记录的indexvar index = this.list.findIndex(item => {if(item.id == id){return true}})// 通过splice方法来移除记录this.list.splice(index,1);},search(keywords){// 保存新的数组// var newList = []// this.list.forEach(item => {// 判断循环的记录是否包含的查询的关键字// if(item.name.indexOf(keywords) != -1){// 将循环的记录添加到新的数组中//newList.push(item)//}//})// 返回数组信息// return newList// filter 过滤返回满足条件的数组returnthis.list.filter(item => {// includes 是否包含if(item.name.includes(keywords)){return item}})}},filters:{ // 通过局部过滤器来实现msgDateFormat:function(msg,pattern=\'\'){// 将字符串转换为Date类型var mt = new Date(msg)// 获取年份var y = mt.getFullYear()// 获取月份 从0开始var m = (mt.getMonth()+1).toString().padStart(2,\"0\")// 获取天数var d = mt.getDate();if(pattern === \'yyyy-mm-dd\'){return y+\"-\"+m+\"-\"+d}// 获取小时var h = mt.getHours().toString().padStart(2,\"0\")// 获取分钟var mi = mt.getMinutes().toString().padStart(2,\"0\")// 获取秒var s = mt.getSeconds().toString().padStart(2,\"0\")// 拼接为我们需要的各式return y+\"-\"+m+\"-\"+d+\" \"+h+\":\"+mi+\":\"+s}}})</script></body></html>

vue时间格式化控件 关于vue设置时间格式( 二 )

vue时间格式化控件关于vue设置时间格式( 二 )