一、過濾器
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>