vue自定义过滤器的创建与使用

vue

原文地址


过滤器:生活中有很多例子,净水器 空气净化器 。
过滤器的作用:实现数据的筛选、过滤、格式化。

vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了。

1、过滤器创建
  过滤器的本质 是一个有参数 有返回值的方法
  

new Vue({

    filters:{

      myCurrency:function(myInput){

        return 处理后的数据

      }

    }

  })

2、过滤器使用
语法:

<any>{{表达式 | 过滤器}}</any>

举个例子:

<h1>{{price | myCurrency}}</h1>

3、过滤器高级用法

在使用过滤器的时候,还可以指定参数,来告诉过滤器按照参数进行数据的过滤。

①如何给过滤器传参?

<h1>{{price | myCurrency(\'¥\',true)}}</h1>

②如何在过滤器中接收到?

new Vue({

  filters:{

    //myInput是通过管道传来的数据

    //arg1在调用过滤器时在圆括号中第一个参数

    //arg2在调用过滤器时在圆括号中第二个参数

    myCurrency:function(myInput,arg1,arg2){

      return 处理后的数据

    }

  }

})

  示例

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<script src="js/vue.js"></script>

<title></title>

</head>

<body>

<div id="container">

<p>{{msg}}</p>

<h1>{{price}}</h1>

<h1>{{price | myCurrency(\'¥\')}}</h1>

</div>

<script>

// filter

new Vue({

el: \'#container\',

data: {

msg: \'Hello Vue\',

price:356

},

//过滤器的本质 就是一个有参数有返回值的方法

filters:{

myCurrency:function(myInput,arg1){

console.log(arg1);

//根据业务需要,对传来的数据进行处理

// 并返回处理后的结果

var result = arg1+myInput;

return result;

}

}

})

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<script src="js/vue.js"></script>

<title></title>

</head>

<body>

<div id="container">

<p>{{msg}}</p>

<h1>{{name | myTextTransform(false)}}</h1>

</div>

<script>

new Vue({

el: \'#container\',

data: {

msg: \'Hello Vue\',

name:\'Michael\'

},

filters:{

myTextTransform: function (myInput,isUpper) {

if(isUpper)

{

return myInput.toUpperCase();

}

else{

return myInput.toLowerCase();

}

}

}

})

</script>

</body>

</html>

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>过滤器</title>

<script src="js/vue.js"></script>

</head>

<body>

<div id="container">

<p>{{msg}}</p>

<h1>{{price}}</h1>

<h1>{{price|myCurrency}}</h1>

</div>

<script>

new Vue({

el:"#container",

data:{

msg:"Hello VueJs",

price:356

},

//过滤器的本质 就是一个有参数有返回值的方法

filters:{

myCurrency:function(myInput){

var result = "$"+myInput;

return result;

}

}

})

</script>

</body>

</html>

 最后一个例子是写死的


返回目录

以上是 vue自定义过滤器的创建与使用 的全部内容, 来源链接: utcz.com/z/379223.html

回到顶部