1.概念
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号（|）指示。
2.语法
2.1调用过滤器的格式
其中 | 表示管道符，管道符前面的为数据，管道符后面的为过滤器，使用过程中数据会传递给过滤器的处理函数，最终将处理的结果返回。
- 插值表达式
<h3>{{ 数据 | 过滤器名称('arg1', 'arg2')) }}</h3>
- v-bind 表达式
<h3 v-text="数据|过滤器名称"></h3>
2.2.定义一个过滤器
定义过滤器需要2个关键参数 过滤器名称 和 处理函数。处理函数 用于过滤器的数据处理，函数的第一个参数固定为过滤器调用时传递的数据，后面参数依次为调用过滤器时传递的参数
- 全局过滤器
关键字：filter
挂载到全局的 Vue 上，Vue 的实例对象都可以使用，如：vm1、vm2......等都可以使用
Vue.filter("过滤器名称", function(data, arg1, arg2){
return data+arg1+arg2
})
var vm1 = new Vue({
el: "#app"
})
var vm2 = new Vue({
el: "#app"
})
- 私有过滤器
关键字：filters
挂载到一个 Vue 实例上，只有该 Vue 实例可以使用，如：只有vm实例可以使用
var vm = new Vue({ el: "#app", filters: { 过滤器名称: function(data, arg1, arg2){ return data+arg1+arg2 } } })
注意：过滤器的调用采用就近原则，如果 私有过滤器 和全局过滤器 名称一致，优先采用私有过滤器
3.过滤器使用
以下将使用全局过滤器展示多个过滤器使用场景。
3.1.全局过滤器
- 无参数过滤器
<div id="app"> <h3>{{ msg | msgFormat1 }}</h3> </div> <script> // 1.无参数过滤器 Vue.filter('msgFormat1', function(data) { return data.replace(/今天/g, '明天') }) var vm = new Vue({ el: '#app', data: { msg: '今天天气很好，我们今天去购物吧。' } }) </script>
- 带参数过滤器
<div id="app"> <h3>{{ msg | msgFormat2('周末') }}</h3> </div> <script> // 2.带参数过滤器 Vue.filter('msgFormat2', function(data, arg) { return data.replace(/今天/g, arg) }) var vm = new Vue({ el: '#app', data: { msg: '今天天气很好，我们今天去购物吧。' } }) </script>
- 多个过滤器
<div id="app"> <h3>{{ msg | msgFormat2('国庆节') | msgFormat3 }}</h3> </div> <script> // 3.多个过滤器 Vue.filter('msgFormat3', function(data) { return data + '那一定很愉快。' }) var vm = new Vue({ el: '#app', data: { msg: '今天天气很好，我们今天去购物吧。' } }) </script>
3.2.私有过滤器
<div id="app"> <p>今天的日期是：{{ date | dateFormat }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { date: new Date() }, filters: { dateFormat: function (date) { var time = new Date(date) var year = time.getFullYear() var month = (time.getMonth() + 1).toString().padStart(2, 0) var day = time.getDay().toString().padStart(2, 0) var hours = time.getHours().toString().padStart(2, 0) var minutes = time.getMinutes().toString().padStart(2, 0) var seconds = time.getSeconds().toString().padStart(2, 0) return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` } } }) </script>