Vue-03vue：过滤器、过渡动画、生命周期、组件

一、过滤器

1.作用
对页面中要展示的数据进行处理
2.定义语法格式
(1)局部定义
和data、methods平级处写filters

filters:{
   
第一个过滤器的名称:function(参数1[,参数N]){
   
处理逻辑
return 结果
}
}

代码说明：

 filters:{
   
     // 局部定义过滤器
     formatPrice(price,n=2,y='￥'){
   
     	console.log(n)
     	return y + price.toFixed(n) + '元';
     }
     //toFixed表示保留几位小数
}

(2)全局定义
在实例化Vue之前
Vue.filter(‘过滤器名称’,function(){})
代码说明：

 Vue.filter('formatPrice',function(price){
   
     return price.toFixed(3);
 });

3.使用
在需要进行数据处理的地方通过管道符| 来使用定义好的过滤器
管道符左边的变量会作为过滤器的第一个参数来使用，可以有多个参数，用逗号隔开
代码说明：

//管道符前面的作为参数传进去
  总计：{
   {
    totalPrice | fprice(0,"￥","元")}}  //总计：￥4198元
 filters:{
   
       fprice(price,n,m,y){
   
             return  m +price.toFixed(n