Vue.js 过滤器
分为局部过滤器和全局过滤器
1、 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
请输入你的姓名:
<input type="text" v-model="name">
<h1>{{name}}长度:{{ name | myFirstFilter }}</h1>
<h2>{{number|concat myTwoFilter}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
// 1、定义无参全局过滤器
// 定义一个Vue全局过滤器 名字myFirstFilter
Vue.filter('myFirstFilter',function(msg){
return msg.length + "!!!"
})
// 2、定义有参全局过滤器 名字myTwoFilter
Vue.filter('myTwoFilter',function(number,arg2){
return number + arg2
})
let app = new Vue({
el:"#app",
data:{
name:'',
number:'6'
},
//局部过滤器的有参和无参的定义和使用方法与全局的过滤器一样。唯一的区别在于局部过滤器是定义在vue的实例中
filters:{ //局部过滤器的有参和无参的定义和使用方法与全局的过滤器一样。唯一的区别在于局部过滤器是定义在vue的实例中
// 局部过滤器的有参和无参的定义和使用方法与全局的过滤器一样。唯一的区别在于局部过滤器是定义在vue的实例中
go:function(value){
if(!value) return ''
value = value.toString()
return value.toUpperCase()
}
}
})
</script>
</body>
</html>