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

用完之後我們時間就變正常了