过滤器

• 私有过滤器
• 全局过滤器

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

1.私有过滤器

先来初始化一个Vue实例

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

我们将data中的ctime渲染到页面上

    
复制代码
			     
				      
					       
歌曲名称
					       
音乐人
					       
专辑图片
					       
创建时间
					       
				      
			     
			     
				      
					       
{
   {item.album_title}}
					       
{
   {item.author}}
					       
					       					       
{
   {ctime}}
					       
删除
				      
			     
    

页面效果如图所示

我们需要在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在渲染前就会帮我们处理，然后在渲染到页面上

那么怎么使用呢？

管道符

    
复制代码
			     
				      
					       
歌曲名称
					       
音乐人
					       
专辑图片
					       
创建时间
					       
				      
			     
			     
				      
					       
{
   {item.album_title}}
					       
{
   {item.author}}
					       
					       					       					       
{
   {ctime|datachange}}
					       
删除
				      
			     
    

管道符后面跟的是过滤器的名字

我们来看下加了过滤器之后的效果吧

这明显也不对啊，看秒应该是07才对嘛，这时候就要用到padStart了 先看看全局过滤器吧

全局过滤器

全局过滤器的使用方法和私有过滤器一样，写法有区别

Vue.filter('过滤器的名字'function(datastr){        //处理})复制代码

所谓的全局过滤器，就是所有的VM实例都共享的

padStart和padEnd

请参考此博文，转自 的

用完之后我们时间就变正常了