码迷,mamicode.com
首页 > 其他好文 > 详细

Vue中过滤器filters的实现,从青铜到王者

时间:2021-01-28 11:48:53      阅读:0      评论:0      收藏:0      [点我收藏+]

标签: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‘)

 

Vue中过滤器filters的实现,从青铜到王者

标签:exp   back   不同   格式化   must   范围   重复   文本格式   filters   

原文地址:https://www.cnblogs.com/guchengnan/p/14334062.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!