vue2 过滤器
程序员文章站
2022-07-15 16:18:52
...
过滤器
只有vue2过滤器才会用过滤器，vue3已经淘汰，vue过滤器可以用在双括号插值和v-bind表达式中，过滤器分为两种，一种私有，另一种全局公有过滤器。
私有过滤器
私有过滤器时放在el挂在的vue实例中，例如将message变量的值转为大写。
<body>
<div id="app">
<p>{{message | cap}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'hello vue'
},
filters: {
cap(val) {
return val.toUpperCase()
}
}
})
</script>
</body>
全局过滤器
全局过滤器是定义在vue实例之前，例如将message变量的值转变为大写
<body>
<div id="app">
<p>{{message | cap}}</p>
</div>
<script>
Vue.filter('cap', (val) => {
return val.toUpperCase()
})
new Vue({
el: '#app',
data: {
message: 'hello vue'
},
})
</script>
</body>
注意 ： 当全局过滤器与私有过滤器重名时，会调用私有过滤器。
过滤器还可以串联，前一个过滤器的值会传入到后一个过滤器中,例如将message的值转入cap中返回大写，再将cap返回的大写字符串转入cap2中转为小写，最后返回到插值中。
<body>
<div id="app">
<input type="text" v-model="message">
<p>{{message | cap |cap2 }} </p>
</div>
<script>
Vue.filter('cap', (val) => {
return val.toUpperCase()
})
Vue.filter('cap2', (val) => {
return val.toLowerCase()
})
new Vue({
el: '#app',
data: {
message: 'hello vue'
},
})
</script>
</body>
过滤器还可以传递参数，默认的message默认传入其中，不需要写入，但在过滤器函数中，第一个参数必须是message。
<body>
<div id="app">
<input type="text" v-model="message">
<p>{{message | cap('!') }} </p>
</div>
<script>
Vue.filter('cap', (val, age) => {
return val.toUpperCase() + age
})
new Vue({
el: '#app',
data: {
message: 'hello vue'
},
})
</script>
</body>
下一篇： 在 C# 控制台中记录异常日志并输出