vue局部和全局过滤器filters的简单使用

vue局部和全局过滤器filters的简单使用

item|toFixed(2) 中的 | 指的是filters 的管道符，filters 对象中的方法 toFixed第一个参数item 是指的要处理的数据，第二个参数params指的是toFixed 方法传递的一个参数值

<template>
  <div class="demo">
     <div class="example">
         <div class="item"  v-for="(item,index) in arr" :key="index">{{item|toFixed(2)}}</div>
         <br>
     </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr:[200.5555555,300.44444,400.7777,500.88888,700.888]
    };
  },
  //filters 里面的this指的是window
  filters:{
    toFixed(item,params){
      return "￥"+(item*2).toFixed(2)
    }
  },
};
</script>

处理后的数据显示

全局过滤器
我们将全局过滤器的名称 改为 publicToFixed
在main.js 在这里插入代码片里面处理

注意点 局部组件内的过滤器是 filters 全局过滤器是 filter 没有s

//全局filter
Vue.filter('publicToFixed',function (item,params) {
  return "￥"+(item*2).toFixed(2)
});

<template>
  <div class="demo">
     <div class="example">
         <div class="item"  v-for="(item,index) in arr" :key="index">{{item|publicToFixed(2)}}</div>
         <br>
     </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr:[200.5555555,300.44444,400.7777,500.88888,700.888]
    };
  },
  //filters 里面的this指的是window
//   filters:{
//     toFixed(item,params){
//       return "￥"+(item*2).toFixed(2)
//     }
//   },
};
</script>