久久天天躁狠狠躁夜夜免费观看 ,日本免费一区二区三区视频

ainer">在前面我們介紹了vue的綜合小案例把前面介紹的一些常用指令我們綜合運用了一下，但是還有個小問題，就是顯示的’創(chuàng)建時間 cTime’的格式?jīng)]有處理，雖然我們可以在后臺服務處理好后再傳遞給前端，但是在前端應該也需要能夠自主地處理，而我們剛剛介紹了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="http://www.wokk.cn/lib/vue-2.4.0.js"></script><link rel="stylesheet" ></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="http://www.wokk.cn/添加"class="btn btn-primary" @click='add'><label>搜索名稱關(guān)鍵字：<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}}</td><td><a href="" @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方法循環(huán)數(shù)組,返回true可以終止循環(huán)// this.list.some((item,i) =>{//if(item.id == id){// 移除記錄 1 移除一條記錄//this.list.splice(i,1);// 返回true 終止循環(huán)//return true;//}//})// 通過findIndex方法獲取要刪除記錄的indexvar index = this.list.findIndex(item => {if(item.id == id){return true}})// 通過splice方法來移除記錄this.list.splice(index,1);},search(keywords){// 保存新的數(shù)組// var newList = []// this.list.forEach(item => {// 判斷循環(huán)的記錄是否包含的查詢的關(guān)鍵字// if(item.name.indexOf(keywords) != -1){// 將循環(huán)的記錄添加到新的數(shù)組中//newList.push(item)//}//})// 返回數(shù)組信息// return newList// filter 過濾返回滿足條件的數(shù)組returnthis.list.filter(item => {// includes 是否包含if(item.name.includes(keywords)){return item}})}}})</script></body></html>

局部過濾器??此處案例中我們通過局部過濾器來實現(xiàn)，當然你也可以通過全局過濾器來實現(xiàn)

文章插圖
在這里插入圖片描述
顯示效果

文章插圖
在這里插入圖片描述
我們發(fā)現(xiàn)顯示的月份7最好是顯示為07，這時我們可以使用一個ES6中新增的方法叫 padStart方法
方法
說明
String.prototype.padStart(maxLength, fillString=”)
字符串長度為maxLength，不夠的在開頭用fillString填充，
例如 :”123″.padStart(6,”a”)=”aaa123″
String.prototype.padEnd(maxLength, fillString=”)
這個和上面類似，是在結(jié)尾處填充，
例如”123″.padEnd(6,”a”)=”123aaa”

文章插圖
在這里插入圖片描述

文章插圖
在這里插入圖片描述
【關(guān)于vue設(shè)置時間格式 vue時間格式化控件】此處僅僅介紹padStart的用法，實際開發(fā)場景中應該將天數(shù)也要padStart處理
顯示時分秒??有時我們顯示Date類型數(shù)據(jù)的時候，我們希望能夠把時分秒也給顯示出來，這時為了靈活點我們可以通過參數(shù)來動態(tài)設(shè)置。

文章插圖
在這里插入圖片描述
調(diào)用過濾器的時候傳遞參數(shù)

文章插圖
在這里插入圖片描述
效果

文章插圖
在這里插入圖片描述
最后完成代碼

<!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="http://www.wokk.cn/lib/vue-2.4.0.js"></script><link rel="stylesheet" ></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="http://www.wokk.cn/添加"class="btn btn-primary" @click='add'><label>搜索名稱關(guān)鍵字：<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="" @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方法循環(huán)數(shù)組,返回true可以終止循環(huán)// this.list.some((item,i) =>{//if(item.id == id){// 移除記錄 1 移除一條記錄//this.list.splice(i,1);// 返回true 終止循環(huán)//return true;//}//})// 通過findIndex方法獲取要刪除記錄的indexvar index = this.list.findIndex(item => {if(item.id == id){return true}})// 通過splice方法來移除記錄this.list.splice(index,1);},search(keywords){// 保存新的數(shù)組// var newList = []// this.list.forEach(item => {// 判斷循環(huán)的記錄是否包含的查詢的關(guān)鍵字// if(item.name.indexOf(keywords) != -1){// 將循環(huán)的記錄添加到新的數(shù)組中//newList.push(item)//}//})// 返回數(shù)組信息// return newList// filter 過濾返回滿足條件的數(shù)組returnthis.list.filter(item => {// includes 是否包含if(item.name.includes(keywords)){return item}})}},filters:{ // 通過局部過濾器來實現(xiàn)msgDateFormat:function(msg,pattern=''){// 將字符串轉(zhuǎn)換為Date類型var mt = new Date(msg)// 獲取年份var y = mt.getFullYear()// 獲取月份 從0開始var m = (mt.getMonth()+1).toString().padStart(2,"0")// 獲取天數(shù)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>

以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請您及時就醫(yī)或請專業(yè)人士給予相關(guān)指導!

「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對您有所幫助：