前端基础之《Vue（10）—过滤器》
一、过滤器
1、作用
用于数据处理。
2、全局过滤器
使用Vue.filter('名称', val=>{return newVal})定义。
在任何组件中都可以直接使用。
3、局部过滤器
使用选项，filters: {}定义，只能在当前组件中使用。
4、过滤器在Vue 3.0中已经淘汰了
5、过滤器只能用在{{}}和v-bind中，不支持其他指令
6、过滤器还可以链式调用{{num | f1 | f2}}，过滤器是有顺序的
二、例子代码
<html>
<head><title>过滤器</title><style>[v-cloak] {display: none;}</style>
</head>
<body><div id="app"><h1 v-cloak>{{price | rmb}}</h1><h1 v-cloak>{{num | myfilter}}</h1></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>Vue.filter('rmb', val=>{// 做任何复杂的处理return '¥' + Number(val).toFixed(2)})const app = new Vue({data() {return {price: 99.9,num: 202219}},filters: {myfilter(val) {return '学号' + val}}})app.$mount('#app')</script></body>
</html>