当前位置: 首页 > 编程笔记 >

Vue3不支持Filters过滤器的问题

王宏深
2023-03-14
本文向大家介绍Vue3不支持Filters过滤器的问题,包括了Vue3不支持Filters过滤器的问题的使用技巧和注意事项,需要的朋友参考一下

filters过滤器已从Vue 3.0中删除,不再支持。

2.x 语法

在2.x中,开发人员可以使用过滤器来处理常见的文本格式

<template>
 <h1>Bank Account Balance</h1>
 <p>{{ accountBalance | currencyUSD }}</p>
</template>
<script>
 export default {
  props: {
   accountBalance: {
    type: Number,
    required: true
   }
  },
  filters: {
   currencyUSD(value) {
    return '$' + value
   }
  }
 }
</script>

虽然这看起来很方便,但它需要一个自定义语法,打破大括号内表达式“只是JavaScript”的原则,这既增加了学习成本,也增加实现逻辑的成本。

3.x 更新

在3.x中,过滤器被删除,不再受支持。相反,我们建议用方法调用或计算属性替换它们。

下面的例子是一个实现类似功能的。

<template>
 <h1>Bank Account Balance</h1>
 <p>{{ accountInUSD }}</p>
</template>

<script>
 export default {
  props: {
   accountBalance: {
    type: Number,
    required: true
   }
  },
  computed: {
   accountInUSD() {
    return '$' + this.accountBalance
   }
  }
 }
</script>

官方建议用计算属性或方法代替过滤器,而不是使用过滤器。

到此这篇关于Vue3不支持Filters过滤器的问题的文章就介绍到这了,更多相关Vue3 Filters过滤器内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库!

 类似资料:
  • 过滤器用于修改数据。 它们可以使用管道(|)字符在表达式或指令中进行分组。 以下列表显示了常用的过滤器。 Sr.No. 名称和描述 1 uppercase 将文本转换为大写文本。 2 lowercase 将文本转换为小写文本。 3 currency 格式化货币格式的文本。 4 filter 根据提供的条件将数组过滤为其子集。 5 orderby 根据提供的标准对数组进行排序。 大写过滤器 使用管道

  • Hibernate3 新增了对某个类或者集合使用预先定义的过滤器条件(filter criteria)的功能。过滤器条件相当于定义一个 非常类似于类和各种集合上的“where”属性的约束子句,但是过滤器条件可以带参数。 应用程序可以在运行时决定是否启用给定的过滤器,以及使用什么样的参数值。过滤器的用法很像数据库视图,只不过是在应用程序中确定使用什么样的参数的。 要使用过滤器,必须首先在相应的映射节

  • 问题内容: 我的查询是这样的: 它会引发QueryParsingException [[comos_v2] [条件]过滤器不支持[mediaType]] ,而映射中不存在“ mediaType”字段。我的问题是为什么术语过滤器不引发异常? 问题答案: 以上不是有效的查询DSL。在上述条款过滤器中,“ mediaType”字段的值应为数组 应该是以下内容:

  • Output filter plugins operate on a template's output, after the template is loaded and executed, but before the output is displayed. 输出过滤器插件的作用是,在装载并执行完一个模板之后显示模板之前,操作该模板的输出。 stringsmarty_outputfilter

  • 本文向大家介绍vue自定义filters过滤器,包括了vue自定义filters过滤器的使用技巧和注意事项,需要的朋友参考一下 官方给出 详情查看 在项目中我们如果有多个filters,那么我怎么一次注册,全局可用,我们在项目里新建一个filters文件夹,如下,index.js是出口文件,readMore是一个对字符串做处理的过滤器 文件目录 下面贴上代码: 然后在main.js里面做如下处理:

  • 参见文档“10. Web”部分