vue中filters(过滤器)的使用方法

首先要知道：过滤器分为全局过滤器和局部过滤器

一、过滤器的概念

概念：Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。
注：过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理。

二，过滤器的具体使用

１，在组件中的使用方法：

<template>
<div>
      <p>总价：{{zong|farls}}</p>
      <p>总件数：{{dan}}</p>
    </div>
  </div>
</template>

<script>
export default{
filters:{
    farls(value){
       var  temp=parseFloat(value).toFixed(2);
       return `￥${temp}`;
    }
  }
  </script>

2.在main.js中配置全局过滤器

/ 全局过滤器使用：Vue.filter( filterName，( )=>{ return // 数据处理结果 } ) 
// 参数一：过滤器名字   参数二：回调函数
// 过滤出来的数据加上 ¥ 

Vue.filter("addCurrencyTag",function(value){
 // var tempPrice = parseFloat(value).toFixed(2) // 保留两位小数
 return `¥ ${value}`
})

在组件中调用

<template>
  <div>
    <p>价格：{{price | addCurrencyTag}}</p>
  </div>
</template>

<script>
export default {
  data(){
    return{
      price:200
    }
  }
</script>