zoukankan html css js c++ java

Vue自带的过滤器

一过滤器写法

二 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