Vue自带的过滤器

╰半橙微兮° 2022-04-23 06:34 144阅读 0赞

一 过滤器写法

\{ \{ message | Filter\}\}

二 Vue自带的过滤器:capitalize

功能:首字母大写

上面代码输出:Abc

三 Vue自带的过滤器:uppercase

功能:全部大写

上面代码输出:ABC

四 Vue自带的过滤器:lowercase

功能:全部小写

上面代码输出:abc

五 Vue自带的过滤器:currency

功能:输出金钱以及小数点

参数:

第一个参数     `{String} [货币符号] - 默认值: '$'`

第二个参数     `{Number} [小数位] - 默认值: 2`

六 Vue自带的过滤器:pluralize

功能: 如果只有一个参数，复数形式只是简单地在末尾添加一个 “s”。如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个…复数词。如果值的个数多于参数的个数，多出的使用最后一个参数。

参数：`{String} single, [double, triple, ...`

`<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title>Vue自带的过滤器</title>         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>     </head>     <body>         <div class="test">         { {message}}    { {message | pluralize 'item'}}                       <ul v-for="item in lili">                 <li>                     { {item}}    { {item | pluralize 'item'}}                  </li>             </ul>                          <ul v-for="item in lili">                 <li>                     { {item}}    { {item | pluralize 'st' 'rd'}}                  </li>             </ul>                          <ul v-for="item in man">                 <li>                     { {item}}    { {item | pluralize 'item'}}                  </li>             </ul>                          <ul v-for="item in man">                 <li>                     { {item}}    { {item | pluralize 'st' 'rd'}}                  </li>             </ul>         </div>         <script type="text/javascript">             var myVue = new Vue({                 el: ".test",                 data: {                     message: 1,                     lili: [1,2,3],                     man: {                         name1: 1,                         name2: 2,                         name3: 3                     }                 }             })         </script>     </body> </html>`

七 Vue自带的过滤器:debounce

(1)限制： 需在@里面使用

(2)参数:`{Number} [wait] - 默认值： 300`

(3)功能：包装处理器，让它延迟执行 `x` ms， 默认延迟 300ms。包装后的处理器在调用之后至少将延迟 `x` ms， 如果在延迟结束前再次调用，延迟时长重置为 `x` ms。

八 Vue自带的过滤器:limitBy

(1)限制:需在v-for(即数组)里面使用

(2)两个参数:

第一个参数:`{Number} 取得数量`

第二个参数:`{Number} 偏移量`

九 Vue自带的过滤器:filterBy

(1)限制:需在v-for(即数组)里面使用

(2)三个参数:

第一个参数: \{String | Function\} 需要搜索的字符串

第二个参数: in (可选,指定搜寻位置)

第三个参数: \{String\} (可选,数组格式)

十 Vue自带的过滤器:orderBy

(1)限制:需在v-for(即数组)里面使用

(2)三个参数:

第一个参数: \{String | Array<String> | Function\} 需要搜索的字符串

第二个参数: \{String\} 可选参数 `order` 决定结果升序（`order >= 0`）或降序（`order < 0`）,默认是升序

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>Vue自带的过滤器</title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>  
    </head>  
    <body>      
        <div class="test">  
              
            <ul v-for="item in lili | orderBy 'o' 1">   
                <li>\{ \{item\}\}</li>  
            </ul>  
              
            <ul v-for="item in lili | orderBy 'o' -1">   
                <li>\{ \{item\}\}</li>  
            </ul>  
              
              
            <ul v-for="item in man | orderBy 'name' 1">   
                <li>\{ \{item.name\}\}</li>  
            </ul>  
              
            <ul v-for="item in man | orderBy 'name' -1">   
                <li>\{ \{item.name\}\}</li>  
            </ul>  
              
              
            <ul v-for="item in man | orderBy ageByTen">   
                <li>\{ \{item.name\}\}</li>  
            </ul>  
        </div>  
        <script type="text/javascript">  
            var myVue = new Vue(\{  
                el: ".test",  
                data: \{  
                    lili: \["oi", "kk", "ll"\],  
                    man: \[   //此处注意man是数组,不是对象  
                  \{  
                    name: 'Jackie',  
                    age: 62  
                  \},  
                  \{  
                    name: 'Chuck',  
                    age: 76  
                  \},  
                  \{  
                    name: 'Bruce',  
                    age: 61  
                  \}  
                \]  
                \},  
                methods: \{  
                    ageByTen: function () \{  
                        return 1;  
                    \}  
                \}  
            \})  
        </script>  
    </body>  
</html>

转自：http://www.cnblogs.com/lily1010/p/5835712.html