Vue學習（一）過濾器以及padStart和padEnd

過濾器

• 私有過濾器
• 全局過濾器

因初學,Vue使用CDN引入的形式

1.私有過濾器

先來初始化一個Vue實例

const vm = new Vue({
    el:"#app",
    data:{
        ctime:new Date()
    }
})

複製代碼

咱們將data中的ctime渲染到頁面上

<table class="table table-hover table-bordered">
			<thead>
				<tr>
					<th>歌曲名稱</th>
					<th>音樂人</th>
					<th>專輯圖片</th>
					<th>建立時間</th>
					<th></th>
				</tr>
			</thead>
			<tbody v-for="item in search(addname)" :key="item.album_id">
				<tr>
					<td>{{item.album_title}}</td>
					<td>{{item.author}}</td>
					<td :style="{ 'background-image': 'url(' + item.pic_small + ')','background-repeat':'no-repeat'}"></td>
					<!-- 時間 -->
					<td>{{ctime}}</td>
					<td><button class="btn btn-danger" @click.prevent="del(item.album_id)">刪除</button></td>

				</tr>
			</tbody>
複製代碼

頁面效果如圖所示

這樣的時間是確定不行的

咱們須要在Vue幫咱們渲染數據以前，給數據"過濾"一下,讓他們以咱們想要的方式渲染到頁面上

在剛開始建立的Vue實例上綁定一個私有的過濾器

const vm = new Vue({
    el:"#app",
    data:{
        ctime:new Date()
    },
    //定義私有過濾器
    filters:{
      //datechange是過濾器的名字
      datechange：function(datastr){
        //datastr是第一個參數，表示要處理傳入的數據，通常表示管道符前的數據
        //根據給定的字符串獲取時間
		var dt = new Date(datastr)
     	        var y = dt.getFullYear()
	        var m = dt.getMonth()
                var d = dt.getDate()
     	        var hh = dt.getHours()
		        var mm = dt.getMinutes()
		        var ss = dt.getSeconds()
		        return `${y}-${m}-${d}    ${hh}:${mm}:${ss}`
      }  
    }
})

複製代碼

注意觀察過濾器的返回值，返回了一個y-m-d hh：mm：ss的時間格式的字符串，這代表咱們拿到ctime的時間對其進行了一系列的加工，最終返回一個咱們須要的輸出格式，Vue在渲染前就會幫咱們處理，而後在渲染到頁面上

那麼怎麼使用呢？

管道符

<table class="table table-hover table-bordered">
			<thead>
				<tr>
					<th>歌曲名稱</th>
					<th>音樂人</th>
					<th>專輯圖片</th>
					<th>建立時間</th>
					<th></th>
				</tr>
			</thead>
			<tbody v-for="item in search(addname)" :key="item.album_id">
				<tr>
					<td>{{item.album_title}}</td>
					<td>{{item.author}}</td>
					<td :style="{ 'background-image': 'url(' + item.pic_small + ')','background-repeat':'no-repeat'}"></td>
					<!-- 時間 -->
					<!-- 管道符後面跟的是過濾器的名字 -->
					<td>{{ctime|datachange}}</td>
					<td><button class="btn btn-danger" @click.prevent="del(item.album_id)">刪除</button></td>

				</tr>
			</tbody>
複製代碼

管道符後面跟的是過濾器的名字

咱們來看下加了過濾器以後的效果吧

這明顯也不對啊，看秒應該是07纔對嘛，這時候就要用到padStart了 先看看全局過濾器吧

全局過濾器

全局過濾器的使用方法和私有過濾器同樣，寫法有區別

Vue.filter('過濾器的名字'function(datastr){
        //處理
})
複製代碼

所謂的全局過濾器，就是全部的VM實例都共享的

padStart和padEnd

請參考此博文，轉自 Airen 的學習JavaScript ES 2017: padStart & padEnd

用完以後咱們時間就變正常了