标签：exp back 不同 格式化 must 范围 重复 文本格式 filters
Vue中允许你自定义过滤器，可被用于一些常见的数据文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。
1 <template> 2 <div class="filters"> 3 <!-- 在Mustache语法中使用 --> 4 <p>{{ message | flip }}</p> 5 <!-- 过滤器的参数传递 --> 6 <p>{{ message | flip(‘??‘, ‘??‘) }}</p> 7 <!-- 在v-text指令中使用 --> 8 <p v-bind:title="message | flip(‘??‘, ‘??‘)"></p> 9 </div> 10 </template>
青铜：组件内创建过滤器，是在filters对象中添加一个方法，如下flip方法：
1 export default { 2 name: ‘Filter‘, 3 data() { 4 return { 5 message: ‘过滤器‘ 6 } 7 }, 8 filters: { 9 flip(value, arg1, arg2) { 10 console.log(value, arg1, arg2) 11 return value.split(‘‘).reverse().join(‘‘) 12 } 13 } 14 } 15 </script>
铂金：上面的flip方法只能在该组件中使用。如果想要在全局范围使用，需要定义在全局main.js
1 import Vue from ‘vue‘ 2 import App from ‘./App.vue‘ 3 4 Vue.filter(‘flip‘, function (value, arg1, arg2){ 5 console.log(value, arg1, arg2) 6 return value.split(‘‘).reverse().join(‘‘) 7 }) 8 9 new Vue({ 10 render: h => h(App), 11 }).$mount(‘#app‘)
砖石：最近做一个vue.js的项目，发现不同的组件重复定义了相同的filter。从代码组织的角度来看，需要把这些filter归到一个文件，全局引入。当然我们不能把这些filters全部定义在main.js文件里，这里有几种方法：
第一种：
①创建一个filters.js文件
1 import Vue from ‘vue‘ 2 Vue.filter(‘flip‘, function (value, arg1, arg2){ 3 console.log(value, arg1, arg2) 4 return value.split(‘‘).reverse().join(‘‘) 5 })
②在 main.js中导入filters.js
1 import Vue from ‘vue‘ 2 import App from ‘./App.vue‘ 3 4 import "./filters" 5 6 new Vue({ 7 render: h => h(App), 8 }).$mount(‘#app‘)
这种方式简单直接，但filters.js不是模块化的js文件。如果要把filters.js拿给其它项目用，还得把全局替换一下Vue.filter才行。
第二种：
你可以把filters.js写成一个标准通用的js模块化文件，如 filters.js
1 export default{ 2 Vue.filter(‘flip‘, function (value, arg1, arg2){ 3 console.log(value, arg1, arg2) 4 return value.split(‘‘).reverse().join(‘‘) 5 }) 6 }
通过Vue.mixin进行全局混入main.js
1 import Vue from ‘vue‘ 2 import App from ‘./App.vue‘ 3 4 import filters from ‘./filters‘; 5 6 new Vue({ 7 render: h => h(App), 8 filters 9 }).$mount(‘#app‘)
现在你便可以在所有template中使用自定义filter了。
注意：混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。
官方貌似不是很推荐，那可以选择插件或以下方式：
1 import Vue from ‘vue‘ 2 import App from ‘./App.vue‘ 3 4 import filters from ‘./filters‘; 5 Object.keys(filters).forEach(key => Vue.filter(key, filters[key])) 6 7 new Vue({ 8 render: h => h(App) 9 }).$mount(‘#app‘)
标签：exp back 不同 格式化 must 范围 重复 文本格式 filters
原文地址：https://www.cnblogs.com/guchengnan/p/14334062.html
