Vue.js 过滤器

1.过滤器的特点

过滤器可以用来对HTML中的数据进行格式化
过滤器本质上是一个函数，接收一个或多个参数，最终需要返回一个数据（简单类型，一般是字符串）
过滤器在vue3.x中被废弃，因为他的功能完全可以使用methods来代替
过滤器中不能访问当前实例

2.过滤器注册

过滤器注册分为全局注册和局部注册
全局注册：Vue.filter(过滤器名称,过滤函数)，所有的组件中都能使用

//入口文件 main.js
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.filter('toUpperCase',function(val){
  return val.toUpperCase()
})

局部注册：只能在该组件中使用，在组件中添加filters属性，他的值是一个对象，key就是过滤器名称，他的值为过滤函数

<script>
export default {
  data() {
    return {
      msg:"good day"
    }
  },
  filters:{
    toUSD:function(val){
      return "$" + val
    }
  }
}
</script>

3.过滤器的调用

语法： data | 过滤器名称
过滤器支持串联： data | 过滤器1 | 过滤器2

<template>
<div id="app">
    <p>{{msg}}</p>
    <!-- 使用全局注册的过滤器 -->
    <p>转换为大写 -- {{msg | toUpperCase}}</p>
    <!-- 使用局部注册的过滤器 -->
    <p>添加$前缀 -- {{msg | toUSD}}</p>
    <!-- 过滤器串联 -->
    <p>过滤器串联 -- {{msg | toUpperCase | toUSD}}</p>
</div>
</template>

过滤器除了可以在{{}}中使用外，还可以在v-bind/v-html中使用

<body>
    <div id="app" v-cloak>
        <div :class="status | statusToclass"></div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            status: 1
        },
        filters: {
            statusToclass(val){
                var result = ""
                switch(val){
                    case 1: result = "success";break;
                    case 2: result = "error";break;
                    case 3: result = "warning";break;
                    default: result = ""
                }
                return result
            }
        }
    })
</script>