全局注册过滤器

Vue-cli项目中过滤器的基本使用

一、全局注册过滤器

1. 创建文件filters/index.js（输出定义的过滤函数）

export function getMoney(value){
    return `￥${value}`
}
export function getNumber(value){
    return `${value.toFixed(2)}`
}

2. 在main.js全局引用filter/index.js

import * as filters from './filter'
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})

3. 在要使用的页面中引入过滤的方法

<template>
    <div class="tab">
        <h4>222</h4>
        <p>{{num | getNumber | getMoney}}</p>
    </div>
</template>

<script>
    export default {
        name: "tab",
        data(){
            return {
                num: 666.52132
            }
        },
    }
</script>

注意：
1.引入顺序不同可能会导致的问题
2.模板字符串结合方法的使用

二、局部使用过滤器

1. 在需要使用的页面中注册过滤函数

 filters:{
      upper:function(value){
          return value.toFixed(1)
      },
 },

2. 在需要的地方使用注册的函数

 <p>{{money | upper}}</p>

管道（|）符号对它们进行串连，并通过一系列过滤器转换一个值
注册过滤函数可以传多个参数进行灵活赋值
<p>{{money | getNumber(4) | getMoney}}</p>
export function getNumber(value,limit){ return${value.toFixed(limit)}}