15_过滤器
总结：
过滤器：
定义：对要显示的数据进行特定格式化后显示（适用于一些简单逻辑处理）
语法：
1.注册过滤器（全局）Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器：{{xxx |过滤器名}} 或 v-bind:属性 ="xxx | 过滤器名"
备注：
1.过滤器也可以接收额外的参数、多个过滤器也可以串联
2.并没有改变原本的数据，是产生新的对应的数据
1.计算属性实现
2.methods实现
3.过滤器实现
4.过滤器实现（传参）
注册过滤器（全局）Vue.filter(name,callback) 或 new Vue{filters:{}}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>过滤器</title> 8 <script type="text/javascript" src="../js/vue.js"></script> 9 <script type="text/javascript" src="../js/dayjs.min.js"></script> 10 </head> 11 <body> 12 <!-- 准备好一个容器 --> 13 <div id="root"> 14 <h2>显示格式化后的时间</h2> 15 <!-- 计算属性实现 --> 16 <h3>现在是：{{fmtTime}}</h3> 17 <!-- methods实现 --> 18 <h3>现在是：{{getfmtTime()}}</h3> 19 <!-- 过滤器实现 --> 20 <h3>现在是：{{time | timeFormater}}</h3> 21 <!-- 过滤器实现(传参) --> 22 <h3>现在是：{{time | timeFormater('YYYY-MM-DD') | mySlice}}</h3> 23 </div> 24 </body> 25 <script type="text/javascript"> 26 Vue.config.productionTips = false //阻止vue在启动时生成生产提示\ 27 //全局过滤器 28 Vue.filter('mySlice',function(value){ 29 return value.slice(0,4) 30 }) 31 new Vue({ 32 el:'#root', 33 data:{ 34 time:1635836031864 //时间戳 35 }, 36 computed:{ 37 fmtTime(){ 38 return dayjs(this.time).format('YYYY年-MM月-DD日 HH:mm:ss') 39 } 40 }, 41 methods: { 42 getfmtTime(){ 43 return dayjs(this.time).format('YYYY年-MM月-DD日 HH:mm:ss') 44 } 45 }, 46 //局部过滤器 47 //region 48 // filters:{ 49 // timeFormater(value){ 50 // return dayjs(value).format('YYYY年-MM月-DD日 HH:mm:ss') 51 // } 52 // }, 53 //endregion 54 filters:{ 55 timeFormater(value,str='YYYY年-MM月-DD日 HH:mm:ss'){ 56 return dayjs(value).format(str) 57 }, 58 // mySlice(value){ 59 // return value.slice(0,4) 60 // } 61 } 62 }) 63 64 </script> 65 </html>
