Vue过滤器学习

自定义过滤器

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

全局过滤器

引入Vue文件

<script src="vue.min.js"></script>

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:{

		}
	})

全局过滤器都是通过vm实例共享的，第一个参数已经规定死了，永远都是管道符前面传递过来的数据

私有过滤器

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

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

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

2. 时间格式化

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里面)

<input type="text" :value="'除了花括号' | bindUse">

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

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

总结

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