vue自定義過濾器的建立與使用

時間 2019-11-12

標籤 vue 自定義過濾器建立使用简体版

原文原文鏈接

過濾器：生活中有不少例子，淨水器空氣淨化器。
過濾器的做用：實現數據的篩選、過濾、格式化。html

vue1.*版本是有內置的過濾器，可是在vue2.*全部的版本都已經沒有自帶的過濾器了。vue

一、過濾器建立
　　過濾器的本質是一個有參數有返回值的方法
　　java

new Vue({
　　　　filters:{
　　　　　　myCurrency:function(myInput){
　　　　　　　　return 處理後的數據
　　　　　　}
　　　　}
　　})

二、過濾器使用
語法：git

<any>{{表達式 | 過濾器}}</any>

舉個例子：ui

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

三、過濾器高級用法code

在使用過濾器的時候，還能夠指定參數，來告訴過濾器按照參數進行數據的過濾。orm

①如何給過濾器傳參？htm

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

②如何在過濾器中接收到？blog

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>

最後一個例子是寫死的