Vue过滤器学习

阳光穿透心脏的1/2处 2022-03-18 05:42 272阅读 0赞

## 自定义过滤器 ##

> Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

### 全局过滤器 ###

引入Vue文件

html结构

<div id="app">
    		<p>{
       {msg}}</p>
    		<p>{
       {msg | trimFormat}}</p>
    		
    		<p>{
       {msg | trimFormat | addFormat('，在使用一个过滤器：','addFormat')}}</p>
    		
    	</div>

创建Vue实例和使用全局过滤器

Vue.filter('trimFormat',function(msg){ 
    		return msg.replace(/\s/g,'')
    	})
    	Vue.filter('addFormat',function(msg,add1,add2){ 
    		return msg+add1+add2
    	})
    	var vm = new Vue({ 
    		el:'#app',
    		data:{ 
    			msg:' 我是 一段 有很多空格 的 文字'
    		},
    		methods:{ 
    
    		}
    	})

![浏览器显示][20190219160346226.png]  
全局过滤器都是通过vm实例共享的，第一个参数已经规定死了，永远都是管道符前面传递过来的数据

### 私有过滤器 ###

过滤器有两个条件【过滤器名称 和 处理函数】，过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器  
**使用私有过滤器格式化时间**

1.  在\#app的div容器里面写入html代码

<div>{
       {timer | dateFormat}}</div>
    <div>{
       {timer | dateFormat('yyyy-mm-dd')}}</div>

1.  时间格式化

var vm = new Vue({ 
    		el:'#app',
    		data:{ 
    			msg:' 我是 一段 有很多空格 的 文字',
    			timer:new Date()
    		},
    		methods:{ 
    
    		},
    		filters:{ 
    			'dateFormat':function(dateStr,pattern=''){ 
    				let dt = new Date(dateStr)
    				let y = dt.getFullYear()
    				let m = (dt.getMonth()+1).toString().padStart(2,'0')
    				let d = dt.getDay().toString().padStart(2,'0')
    				if(pattern.toLowerCase()==='yyyy-mm-dd'){ 
    					return `${ y}-${ m}-${ d}`
    				}else{ 
    					let hh = dt.getHours().toString().padStart(2,'0')
    					let mm = dt.getMinutes().toString().padStart(2, '0')
    					let ss = dt.getSeconds().toString().padStart(2,'0')
    					return `${ y}-${ m}-${ d} ${ hh}:${ mm}:${ ss}`
    				}
    			}
    		}
    	})

### 过滤器用在v-bind表达式 ###

html代码(放在id为app的div里面)

js代码(放在私有过滤器filters里面)

'bindUse':function(msg1){ 
    				return msg1+'还可以用在v-bind表达式'
    			}

### 总结 ###

1.  过滤器需要两个条件：过滤器名称和处理函数（函数记得要返回）
2.  过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。比如上面例子trimFormat过滤器函数接收msg，addFormat过滤器函数接收的是trimFormat过滤器函数返回的结果
3.  如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器
4.  过滤器调用采用的是就近原则
5.  管道符号后面的过滤器第一个参数是处理函数的第二个参数，第二个则是处理函数的第三个，以此类推，因为处理函数第一个始终是上一个操作链的值
6.  可以使用花括号，也可以使用v-bind

[20190219160346226.png]: /images/20220318/9bb77f44eae3495fa1e8bd7733b58ad7.png