Vue基础知识之过滤器（四）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

过滤器

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 >
        <!--输出的字符串中a的个数-->
        <span>msg的值：{{msg}},其中a的个数：</span> {{msg | myfilter('a')}}
        <br>
        <!--输出的字符串中b的个数-->
        <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>

filters过滤器

<div id='app'>
数字1：{{num1:toInt}}
数字2：{{num2:toInt}}
数字3：{{num3:toInt}}
</div>	
通过管道符|把函数toInt放在变量后面，num1，num2，num3会分别作为参数value传入toInt（value）方法进行运算，并返回一个整数。
let vm=new Vue({
	el:'#app',
	data:{
		num1:33.11,
		num2:23.22,
		num3:90.65
	},
	//过滤器
	filters:{
		toInt(value){//ES6语法
			return pparseInt(value)
		}
	}
})

参数对象除了el和data属性之外，还多了一个filters属性，它的值就是一个对象，里面定义了一个叫toInt()的方法，传入了一个value的参数，函数的作用就是把传入的参数value，简单地转成一个整出并return回去。

以上是 Vue基础知识之过滤器（四） 的全部内容， 来源链接： utcz.com/z/380692.html

回到顶部