zoukankan      html  css  js  c++  java
  • Vue自带的过滤器

    一 过滤器写法

    {{ message | Filter}}

    二 Vue自带的过滤器:capitalize

    功能:首字母大写

    复制代码
    复制代码
    <!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 | capitalize}}
            </div>
            <script type="text/javascript">
                var myVue = new Vue({
                    el: ".test",
                    data: {
                        message: "abc"
                    }
                })
            </script>
        </body>
    </html>
    复制代码
    复制代码

    上面代码输出:Abc

    三 Vue自带的过滤器:uppercase

    功能:全部大写

    复制代码
    复制代码
    <!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 | uppercase}}
            </div>
            <script type="text/javascript">
                var myVue = new Vue({
                    el: ".test",
                    data: {
                        message: "abc"
                    }
                })
            </script>
        </body>
    </html>
    复制代码
    复制代码

    上面代码输出:ABC

    四 Vue自带的过滤器:uppercase

    功能:全部小写

    复制代码
    复制代码
    <!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 | lowercase}}
            </div>
            <script type="text/javascript">
                var myVue = new Vue({
                    el: ".test",
                    data: {
                        message: "ABC"
                    }
                })
            </script>
        </body>
    </html>
    复制代码
    复制代码

    上面代码输出:abc

    五 Vue自带的过滤器:currency

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

    参数:

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

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

    复制代码
    复制代码
    <!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 | currency}} <!--输出$123.47-->
                {{message | currency '¥' "1"}} <!--输出$123.5-->
            </div>
            <script type="text/javascript">
                var myVue = new Vue({
                    el: ".test",
                    data: {
                        message: "123.4673"
                    }
                })
            </script>
        </body>
    </html>
    复制代码
    复制代码

    六 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'}} <!--输出: 1 item-->
            
                <ul v-for="item in lili">
                    <li>
                        {{item}}    {{item | pluralize 'item'}} <!--输出: 1    item 2    items 3    items-->
                    </li>
                </ul>
                
                <ul v-for="item in lili">
                    <li>
                        {{item}}    {{item | pluralize 'st' 'rd'}} <!--输出: 1    st 2    rd 3    rd-->
                    </li>
                </ul>
                
                <ul v-for="item in man">
                    <li>
                        {{item}}    {{item | pluralize 'item'}} <!--输出: 1    item 2    items 3    items-->
                    </li>
                </ul>
                
                <ul v-for="item in man">
                    <li>
                        {{item}}    {{item | pluralize 'st' 'rd'}} <!--输出: 1    st 2    rd 3    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。

    复制代码
    复制代码
    <!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">
                <button id="btn" @click="disappear | debounce 10000">点击我,我将10秒后消失</button>
            </div>
            <script type="text/javascript">
                var myVue = new Vue({
                    el: ".test",
                    methods: {
                        disappear: function () {
                            document.getElementById("btn").style.display= "none";
                        }
                    }
                })
            </script>
        </body>
    </html>
    复制代码
    复制代码

    八 Vue自带的过滤器:limitBy

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

    (2)两个参数:

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

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

    复制代码
    复制代码
    <!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 | limitBy 10"> <!--输出1 2 3 4 5 6 7 8 9 10-->
                    <li>{{item}}</li>
                </ul>
                <ul v-for="item in lili | limitBy 10 3"> <!--输出 4 5 6 7 8 9 10 11 12 13-->
                    <li>{{item}}</li>
                </ul>
            </div>
            <script type="text/javascript">
                var myVue = new Vue({
                    el: ".test",
                    data: {
                        lili: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
                    }
                })
            </script>
        </body>
    </html>
    复制代码
    复制代码

    九 Vue自带的过滤器:filterBy

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

    (2)三个参数:

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

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

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

    复制代码
    复制代码
    <!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 | filterBy 'o' "> <!--输出oi oa lo ouo oala-->
                    <li>{{item}}</li>
                </ul>
                
                <ul v-for="item in man | filterBy 'l' in 'name' "> <!--输出lily lucy-->
                    <li>{{item.name}}</li>
                </ul>
                
                <ul v-for="item in man | filterBy 'l' in 'name' 'dada' "> <!--输出lily+undefined lucy+undefined undefined+lsh-->
                    <li>{{item.name+"+"+item.dada}}</li>
                </ul>
            </div>
            <script type="text/javascript">
                var myVue = new Vue({
                    el: ".test",
                    data: {
                        lili: ["oi", "oa", "ll", "lo" ,"ouo" ,"kk" ,"oala"],
                        man: [   //此处注意man是数组,不是对象
                        {name: "lily"},
                        {name: "lucy"},
                        {name: "oo"},
                        {dada: "lsh"},
                        {dada: "ofg"}
                        ]
                    }
                })
            </script>
        </body>
    </html>
    复制代码
    复制代码

    十 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"> <!--输出kk ll oi-->
                    <li>{{item}}</li>
                </ul>
                
                <ul v-for="item in lili | orderBy 'o' -1"> <!--输出oi ll kk-->
                    <li>{{item}}</li>
                </ul>
                
                <!--遍历含对象的数组-->
                <ul v-for="item in man | orderBy 'name' 1"> <!--输出Bruce Chuck Jackie-->
                    <li>{{item.name}}</li>
                </ul>
                
                <ul v-for="item in man | orderBy 'name' -1"> <!--输出Jackie Chuck Bruce-->
                    <li>{{item.name}}</li>
                </ul>
                
                <!--使用函数排序-->
                <ul v-for="item in man | orderBy ageByTen"> <!--输出Bruce Chuck Jackie-->
                    <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
  • 相关阅读:
    zookeeper使用场景
    zookeeper安装配置
    hadoop 远程调试
    deep learning笔记
    Sentiment Analysis(1)-Dependency Tree-based Sentiment Classification using CRFs with Hidden Variables
    PRML阅读笔记 introduction
    Python 学习笔记(2)
    python nltk 学习笔记(5) Learning to Classify Text
    python nltk 学习笔记(4) Writing Structured Programs
    python nltk 学习笔记(3) processing raw text
  • 原文地址:https://www.cnblogs.com/rianbowymail/p/8993830.html
Copyright © 2011-2022 走看看