过滤器用于进行文本内容格式化处理。

    过滤器可以在插值表达式和v-bind中使用。

    ·可以将一个数据传入到多个过滤器中进行处理。

    全局过滤器 - 图1

    <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> </head> <body> <div id=“app”> <p v-bind:title=“value | filterA”>这是标签</p> <p>{{ value2 | filterA }}</p> </div> <div id=“app2”> <p>{{ value | filterA }}</p> </div> <script src=“lib/vue.js”></script> <script> // 设置全局过滤器 Vue.filter(‘filterA’, function (value) { return value.split(‘-‘).join(‘’); }); new Vue({ el: ‘#app’, data: { value: ‘a-b-c’, value2: ‘x-y-z’ } }); new Vue({ el: ‘#app2’, data: { value: ‘q-w-e’ } }) </script> </body> </html>

    ·一个过滤器可以传入多个参数。

    全局过滤器 - 图2

    <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> </head> <body> <div id=“app”> <p>{{ value | filterC(‘lagou-‘, 200) }}</p> <p>{{ value | filterC(‘qqq-‘, 200) }}</p> </div> <script src=“lib/vue.js”></script> <script> /* Vue.filter(‘filterA’, function (value) { console.log(value, ‘filterA’); return value.split(‘-‘).join(‘’); }); Vue.filter(‘filterB’, function (value) { console.log(value, ‘filterB’); return value[0].toUpperCase() + value.slice(1); }) */ Vue.filter(‘filterC’, function (par1, par2, par3) { return par2 + par1.split(‘-‘).join(‘’); }); new Vue({ el: ‘#app’, data: { value: ‘a-b-c’ } }); </script> </body> </html>