自定义过滤器
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实例共享的,第一个参数已经规定死了,永远都是管道符前面传递过来的数据
私有过滤器
过滤器有两个条件【过滤器名称 和 处理函数】,过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候 优先调用私有过滤器
使用私有过滤器格式化时间
- 在#app的div容器里面写入html代码
<div>{{timer | dateFormat}}</div>
<div>{{timer | dateFormat('yyyy-mm-dd')}}</div>
- 时间格式化
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表达式'
}
总结
- 过滤器需要两个条件:过滤器名称和处理函数(函数记得要返回)
- 过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。比如上面例子trimFormat过滤器函数接收msg,addFormat过滤器函数接收的是trimFormat过滤器函数返回的结果
- 如果私有过滤器和全局过滤器名称一致了,这时候 优先调用私有过滤器
- 过滤器调用采用的是就近原则
- 管道符号后面的过滤器第一个参数是处理函数的第二个参数,第二个则是处理函数的第三个,以此类推,因为处理函数第一个始终是上一个操作链的值
- 可以使用花括号,也可以使用v-bind