笔记总结2（Vue.filter 过滤器）

其实可以理解成就是一个函数。
过滤器分为两种。
1.全局过滤器
./libs/filter.js

import Vue from 'vue'
Vue.filter('capitalize',(value)=>{
    if (!value) return ''
    return value + "1"
})

引入：
main.js

import "./libs/filter"

调用：

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

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

export default(){
  methods:{
    getDetail(){
      //在函数里调用
      let capitalize = this.$options.filters.capitalize(data)
    }
  }
}

2.组件过滤器

export default(){
  data(){
      return{
    }
  {

filters:{
    filterA：function(value){
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    },
     filterB: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    },
},
  watch: {
  },
  methods: {
  },
  mounted() {
  }
};

用法同全局
多参数

{{ message1, message1 | filterA }}

其他用法：
串联

{{ message | filterA | filterB }}

串联用法会将前一个的返回当作下一个过滤器的参数 例如
message 的内容会被当做filterA的入参，
而filterA的返回则会当作filterB的入参，
最终返回filterB的结果

直接传参

{{ message | filterA('arg1', arg2) }}

此时message 依然会被当做第一个参数。而arg1和arg2 则会被当做第二个和第三个参数传入