过滤器
- 用来过滤模型数据，在现实之前进行数据处理和筛选
- 语法{{data | filter(参数) | filter2(参数)}}
- vue2.0中移除了所有内置的过滤器
可以使用 loadash 第三方工具库
自定义过滤器
- vue允许自定义过滤器
- 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
- vue 过滤器分为全局过滤器和局部过滤器
全局过滤器
定义全局过滤器，需要使用全局API Vue.filter()
Vue.filter('ID',function(){}) 传两个参数 第一个 是 过滤器的 id（过滤器唯一标识） 第二个是一个函数，描述过滤逻辑,函数的第一个参数是 要过滤的值 以后的参数是过滤器参数，函数逻辑处理完 须return出结果
定义过滤器
Vue.filter('ID',function(msg,arg1,arg2){
return msg+arg1+arg2
})
使用过滤器 在双花括号中
{{ msg | ID (arg1,arg2)}}
使用过滤器 在 v-bind中
<div v-bind:id="msg | ID (arg1,arg2) "></div>
例如定义一个可以自定义保留几位小数的过滤器
Vue.filter('toFixed',function(msg,n){
return msg.toFixed(n) //msg就是要过滤的值 n 就是过滤器的参数这里是保留 n 位小数
})
new Vue({
el:"#app",
data:{
num:1.123456
}
})
<div id='app'>
<!--num就是过滤器中的 msg 2就是 过滤器传的参数 n-->
<p>{{num | toFixed(2)}}</p>
</div>
局部过滤器
局部过滤器通过 vue实例 选项 filters 定义 作用仅限于该 vue实例
列如定义一个 文字翻转的过滤器
new Vue({
el:"#app",
data:{
num:""
},
filters:{
'reverse':function(data){
return data.split('').reverse().join('')
}
}
})
使用过滤器
<input type="" v-model="num" name="" id="" value="" />
<p>{{num | reverse}}</p>
效果 输入1234 p标签内返回 4321
