vue中实现过滤器:页面中接口返回的数据中部分数据需要进一步处理展示时可用过滤器进行处理

在Vue开发中,遇到接口返回的数字类型数据需要转化为汉字展示,例如性别。本文介绍了如何创建过滤器来处理这种情况。示例包含两个过滤器:一个用于获取会员级别名称,另一个用于判断是否具有开店资格,详细展示了过滤器处理多个参数的方法。
摘要由CSDN通过智能技术生成

在做页面列表时,有时候接口返回的数据都是一些数字类型来标记是哪些类型,比如说经常用的0表示性别男,1表示性别女,但是到页面上展示时需要转化为汉字 "男" 和 "女"进行展示,现在记录一下使用过滤器实现转化的过程,

代码说明:

例子中写了两个过滤器 一个获取会员级别名称的过滤器 一个判断是否有开店资格的过滤器,写两个是为了展示过滤器需要多个参数时的写法

过滤器 getViplevel 有一个参数level 使用时第一个参数是放在管道符|前边的,后边没有参数了方法名后边就不再跟东西了

过滤器getIsCanHasStore需要两个参数 第一个参数也是放在管道符|前边的,后边的参数是放到过滤器名称后边的小括号里,如果还有更过参数就继续在括号里追加就行,写法

 <span v-else-if="col.key=='isCanHasStore'">{ {scope.row["vipLevel"] | getIsCanHasStore(scope.row["vipDays"],canshu3)}}</span>

 

<template>
    <div class="list">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column :prop='col.key' :label="col.value" width="150" v-for="(col,index) in
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js过滤器是一种函数,用于对数据进行格式化处理,以便在模板显示。其作用类似于计算属性,但过滤器可以在模板多次使用,并且可以传递参数。 定义一个Vue过滤器需要使用Vue.filter方法,该方法接受两个参数:过滤器名称和过滤器函数。例如: ```javascript Vue.filter('capitalize', function(value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) ``` 上述代码定义了一个名为“capitalize”的过滤器,它将传入的字符串首字母大写。在模板可以这样使用: ```html <p>{{ message | capitalize }}</p> ``` 其,message是要过滤数据,capitalize是过滤器名称。 除了普通的过滤器函数,Vue还提供了全局过滤器和局部过滤器两种方式。全局过滤器可以在任何Vue实例使用,而局部过滤器仅在当前组件可用。 全局过滤器的定义方式与上述示例相同,只需要Vue实例化之前定义即可: ```javascript Vue.filter('myFilter', function(value) { // ... }) ``` 局部过滤器的定义方式与全局过滤器类似,只需要在组件的filters选项定义即可: ```javascript Vue.component('my-component', { filters: { myFilter: function(value) { // ... } } }) ``` 需要注意的是,过滤器并不会改变原始数据,它只是在模板显示数据进行格式化处理,因此建议在模板使用过滤器,而不是在JavaScript代码使用。同,过多的过滤器使用可能会影响性能,应该谨慎使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值