vue 过滤器的使用

vue 过滤器

1、vue 过滤器概念

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

2、vue 过滤器基本使用

        过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“|”符号指示：

<!-- 在双花括号中 -->
<div>{{ message | capitalize }}</div>

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

vue 过滤器分为全局过滤器和局部过滤器

3、vue 局部过滤器

在组件内

<template>
  <div>
    <p>电脑价格：{{price | addPriceIcon}}</p>
  </div>
</template>
 
<script>
export default {
  data(){
    return{
      price:200
    }
  },
  filters: {
    //处理函数
    addPriceIcon(value){
        console.log(value)//200
         return '¥' + value
     }
  }
};
</script>

4、vue 全局过滤器

在 main.js 文件中

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

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

在 Home.vue 中

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

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