vue自定义filters过滤器
官方给出
Vue.filters(id , [definition])
//id {string}
//definition {function}
详情查看
在项目中我们如果有多个filters，那么我怎么一次注册，全局可用，我们在项目里新建一个filters文件夹，如下，index.js是出口文件，readMore是一个对字符串做处理的过滤器
文件目录
下面贴上代码：
//index.js
// 引入所有的过滤函数
import readMore from './readMore';
// 导出在一个对象上
export default {
readMore
};
//readMore.js
//查看更多文字显示'...'
let readMore = (text,length,suffix) => {
if(text) {
if(text.length <= length) return text;
return text.substring(0,length) + suffix;
}
return text;
};
export default readMore;
然后在main.js里面做如下处理：
main.js做全局注册
//全局注册自定义的过滤器
import filters from './filters';
for(let key in filters){
Vue.filter(key, (val,value1,value2) => {
return filters[key](val,value1,value2);
});
}
就可以在全局使用了
//在test.vue里面使用
<p html="readMore('文字文字' ,60,`...<font style='color:rgba(25,123,207,1);'>全文</font>`)"></p>
<span>#<span class="add">{{'文字文字' | readMore(15,'...')}}</span>#</span>
总结
以上所述是小编给大家介绍的vue自定义filters过滤器，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
过滤器用于修改数据。 它们可以使用管道（|）字符在表达式或指令中进行分组。 以下列表显示了常用的过滤器。 Sr.No. 名称和描述 1 uppercase 将文本转换为大写文本。 2 lowercase 将文本转换为小写文本。 3 currency 格式化货币格式的文本。 4 filter 根据提供的条件将数组过滤为其子集。 5 orderby 根据提供的标准对数组进行排序。 大写过滤器 使用管道
-
演示在网关追加一个header public class CustomFilter implements GlobalFilter, Ordered { @Override public Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) { // 演示在网关追加heade
-
SOFARPC 提供了一套良好的可扩展性机制，为各个模块提供 SPI 的能力。 SOFARPC 对请求与响应的过滤链处理方式是通过多个过滤器 Filter 来进行具体的拦截处理，该部分可由用户自定义 Filter 扩展，自定义 Filter 的执行顺序在内置 Filter 之后。具体方式如下： Bolt Filter 新建自定义 Filter 。 public class CustomFilter
-
问题内容： 我试图在Log4J2中实现和配置自定义过滤器- 基于ThresholdFilter，但打算做更多。我已经看到了有关自定义追加程序的主题，这些主题遵循相同的插件注释语法，但是还没有找到有关自定义拟合程序的主题。 MyCustomFilter.java （基于ThresholdFilter） log4j2.xml LoggingRunner.java 配置语法似乎与Apache文档中的语法
-
本文向大家介绍Django 自定义过滤器，包括了Django 自定义过滤器的使用技巧和注意事项，需要的朋友参考一下 示例 过滤器允许您将函数应用于变量。此函数可以使用0或1参数。语法如下： 过滤器可以链接在一起，因此非常有效： 如果将其翻译成python，上面的代码行将给出以下内容： 在此示例中，我们将编写一个verbose_name适用于模型（实例或类）或QuerySet的自定义过滤器。它将返回
-
Dorado支持在Client或Server端创建自定义的过滤器并指定过滤器的优先级生成过滤器链路。 Dorado支持全局生效的Filter和单个配置生效的Filter，具体使用方式见下面说明。 1.过滤器接口定义 package com.meituan.dorado.rpc.handler.filter; /** * 过滤器接口, 可自行实现 * * 全局生效Filter,通过SPI配置