vue过滤器filter的使用方法详解

// 在花括号中使用
<div>{{ message | msgFilter }}</div>
// 在v-bind中使用
<div v-bind:id="rawId | idFilter"></div>

//main.js
Vue.filter('filter1',function(value){
    return value.chartAt(0).toUpperCase()+value.slice(1)
})
new Vue({
    //.......
})

filters：{
    filter1：function(value){
        return value.chartAt(0).toUpperCase()+value.slice(1)
    }
}

<div> {{ message | filter1 | filter2 }} </div>

<div> {{ message | filter1('param1','param2') }} </div>

filters：{
    filter1：function(value,value1,value2){
        console.log(value)   // message变量的值
        console.log(value1)  // param1
        console.log(value2)  // param2
    }
}

<template>
  <div class="file-bg"> {{ fileObj | typeFilter}} </div>
</template>
<script>
  let that;
  export default {
    data(){
	  return{
		fileObj:{type:'file'},
        classObj:{file:'file-img'}
      }
    },
    beforeCreate(){
      that = this;
    },
    filters:{
	  typeFilter:function(obj){
        console.log(that.classObj)
      }
    }
  }
</script>

<template>
  <div class="file-bg"> {{ fileObj | typeFilter(classObj) }} </div>
</template>
<script>
  export default {
    data(){
	  return{
		fileObj:{type:'file'},
        classObj:{file:'file-img'}
      }
    },
    filters:{
	  typeFilter:function(obj,classObj){
        console.log(obj)
        console.log(classObj)
      }
    }
  }
</script>