vue3.0 过滤器解决方案

最新推荐文章于 2024-10-18 11:31:54 发布

放荡不羁的疯子

最新推荐文章于 2024-10-18 11:31:54 发布

阅读量3.2k

点赞数

分类专栏：学习文章标签： vue.js

本文链接：https://blog.csdn.net/flyer9651/article/details/122045516

版权

学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

因为vue3.0不再支持局部过滤器属性，笔者参考这篇文章总结出下面的用法

vue3.0中为啥要删除过滤器功能，因为功能重复吧？ - 知乎

1、首先定义一个filter.ts文件

import { computed } from 'vue'

export default function () {
  const getSystemUserStatus = computed(() => {
    // 这里需要用一个函数来返回，好像是用到了闭包的概念，这里我不太理解这种写法
    return function(status: number) {
      console.log(status, '123')
      switch(status) {
        case 100:
          return '使用中';
        case 200:
          return '禁用中';
        case 201:
          return '冻结中';
      }
    }
  })
  return {
    getSystemUserStatus
  }
}

2、在对应的vue文件中进行引入。

<template>
  <div class="rolesManagement">
    {{ getSystemUserStatus(100) }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import AccountManagementFilter from '@/filter/account-management-filter'

export default defineComponent({
  name: 'AAA',
  setup() {
    const { getSystemUserStatus } = AccountManagementFilter()
    return {
      getSystemUserStatus
    }
  },
})
</script>