vue过滤器的使用

最新推荐文章于 2022-07-10 08:40:26 发布

蜡笔love小新

最新推荐文章于 2022-07-10 08:40:26 发布

阅读量194

点赞数

分类专栏： vue基础文章标签： vue基础过滤器 filters

本文链接：https://blog.csdn.net/yellowmushroom/article/details/102556999

版权

vue基础专栏收录该内容

8 篇文章 1 订阅

订阅专栏

定义自定义过滤器，可以使用的两个地方为插值表达式{{}}中与v-bind表达式中，我们可以定义为全局过滤器和局部过滤器。全局过滤器使用的是Vue.filter()，局部过滤器使用的是filters: {}。全局过滤器需要定义在new Vue()之前。可以同时使用多个过滤器，调用顺序由左到右。
过滤器是 JavaScript 函数，因此可以接收参数，过滤器第一个参数默认为要过滤的数，第二个参数开始才是调用过滤器时传入的参数，如下面案例partFilter函数，partFilter(value, a) value默认为item.name，a接受传入的实参‘一月’。

案例：页面显示英文月份，所有字母小写，如果为一月转换成汉字‘一月’
代码：

<body>
    <div id="app">
        <ul>
          <li v-for="item in list" :key="item.id">{{item.name | myfilter | partFilter('一月')}}</li>
        </ul>
    </div>
</body>
<script>
    //全局过滤器
    Vue.filter("myfilter", function(value) {
      return value.toLowerCase()
    })
    new Vue({
        el: "#app",
        data: {
            list:[
              {id: 1,
              name: 'January'
              },
              {id: 2,
              name: 'February'
              },
              {id: 3,
              name: 'March'
              }
            ]
        },
        // 局部过滤器
        filters: {
          partFilter(value, a) {
            return value === 'january' ? a : value
          }
        }
    }) 
</script>

项目中有用到的地方：当表格的每一行遍历渲染的时候，某列数据根据不同条件显示不同格式的时候，

蜡笔love小新

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue过滤器的使用

定义自定义过滤器，可以使用的两个地方为插值表达式{{}}中与v-bind表达式中，我们可以定义为全局过滤器和局部过滤器。全局过滤器使用的是Vue.filter()，局部过滤器使用的是filters: {}。全局过滤器需要定义在new Vue()之前。可以同时使用多个过滤器，调用顺序由左到右。过滤器是 JavaScript 函数，因此可以接收参数，过滤器第一个参数默认为要过滤的数，第二个参数开始才...
复制链接

扫一扫

专栏目录