Vue过滤器的用法和自定义过滤器使用

作者：香农·良时间：2024-05-09 10:41:20　

1、过滤器的用法,用 ‘|' 分割表达式和过滤器。

例如：{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数。

用两个过滤器：{{msg | myfilter | myfilternumber }}

2、自定义的过滤器

过滤器的结构为：Vue.filter("id",function(value,a){});

value是过滤器的一个参数，也是默认的原始值。a是自定义的一个参数。

自定义过滤器的例子：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
<style>

</style>
</head>

<body>
<div id="app">

<span>msg的值：{{msg}},其中a的个数：</span> {{msg | myfilter('a')}}
<br>

<span>msg的值：{{msg}},其中b的个数：</span> {{msg | myfilter | myfilternumber}}

</div>
</body>
<script type="text/javascript">
Vue.filter("myfilter", function(value, arg) {
//返回一个对象或者json字符串，列出字符串中的字符以及字符的个数,不区分大小写
var obj = {};
var s = value.split('').sort().join("");
var reg = /(.)\1+/ig;
var str = s.replace(reg, "$1"); //字符串去重后的结果
var i = 0,
n,
a;
while (s.length > 0) {
a = str.charAt(i);
n = s.lastIndexOf(a) + 1;
obj[a] = n;
s = s.substring(n);
i++;
}
return arg ? obj[arg] : obj;
});
Vue.filter("myfilternumber", function(value) {
return value.b;
});
var app1 = new Vue({
el: "#app",
data: {
msg: "a1a1aba2babac"

},
methods: {

}
});
</script>

</html>

来源：http://www.cnblogs.com/shannonliang/p/6127525.html

标签：vue,过滤器

投稿

Vue过滤器的用法和自定义过滤器使用

猜你喜欢

pycharm 使用心得（四）显示行号

asp如何在线查询本地机的文件？

详解python多线程、锁、event事件机制的简单使用

修改vue+webpack run build的路径方法

Vue调用后端java接口的实例代码

python 将大文件切分为多个小文件的实例

通过python爬虫赚钱的方法

python爬虫把url链接编码成gbk2312格式过程解析

python write无法写入文件的解决方法

python3+opencv生成不规则黑白mask实例

看看那些名牌LOGO的成长史

Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解）)

python统计文本字符串里单词出现频率的方法

基于Mediapipe+Opencv实现手势检测功能

Python学习入门之区块链详解

Python实现图片转字符画的示例代码

一种弹出提示信息时页面背景色调改变的方法

最全的mysql查询语句整理

一个免刷新页面的JavaScript日历

基于Golang 高并发问题的解决方案