vue.js学习（三）

最新推荐文章于 2018-12-07 09:07:18 发布

celen_

最新推荐文章于 2018-12-07 09:07:18 发布

阅读量574

点赞数 1

分类专栏： vue.js学习文章标签： vue-js

本文链接：https://blog.csdn.net/litong94/article/details/56846772

版权

vue.js学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

继续前面的学习，上文链接

正文

今天学习vue.js中的过滤器

一.介绍

过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。过滤器在指令中由一个管道符 (|) 标记，并可以跟随一个或多个参数。例如使用内置过滤器{PS:（适用于2.0以下版本，2.0以上包括2.0已经废弃内置过滤器，使用时需要自定义过滤器，下面会有提到）。）}capitalize可以将首字母转换成大写：

    <body>
        <div class="test">
            {{message | capitalize}}
        </div>
    </body>
     <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    message: "abc"
                }
            })
        </script>
    // 效果：'abc'=>>'Abc'

二.内置过滤器

1.capitalize

功能：首字母大写

2.uppercase

功能：全部大写

3.lowercase

功能：全部小写

4.currency

输出金钱以及小数点,有两个参数，第一个为金钱符号，默认为‘$’,第二个参数为保留小数点位数。

<div id="app">
    {{message|currency '￥' '5'}}
</div>
//输出:￥12.00000

5.debounce

功能：在事件中使用，包装处理器，让它延迟执行 x ms，默认延迟 300ms。
下面示例为：点击按钮之后，按钮在2s后消失，说明事件延迟了2s才执行。

<body>
<div id="app">
    <input type="button" id="button" value="点击之后2秒消失" @click="hidden | debounce 2000" />
</div>
</body>
<script type="text/javascript">
 var vm=new Vue({
    el:"#app",
    methods:{
        hidden:function(){
            document.getElementById("button").style.display='none';
        }
    }
 })
</script>

6.limitBy

功能：限制数组中的取值。需在v-for(即数组)里面使用，有两个参数:第一个参数:{Number} 取得数量，第二个参数:{Number} 偏移量

<div id="app">
    <ul  v-for='arr in arrs | limitBy 3 2'>
        <li>{{arr}}</li>
    </ul>
</div>
</body>
<script type="text/javascript">
 var vm=new Vue({
    el:"#app",
    data:{
        arrs:['1','2','3','4','5','6']
    }
 })
</script>

效果：
这里写图片描述

7.filter

功能::需在v-for(即数组)里面使用,有三个参数:第一个参数: {String | Function} 需要搜索的字符串，第二个参数: in (可选,指定搜寻位置)，第三个参数: {String} (可选,数组格式)。

  <body>
        <div class="test">
            <ul v-for="item in arr | filterBy 'o' ">
                <li>{{item}}</li>
            </ul>
        </div>
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    arr: ["hello", "body", "ik", "mo" ,"asq" ,"ko" ,"oven"]
                }
            })
        </script>
    </body>

效果：
这里写图片描述

三.自定义过滤器

方法:定义一个全局的自定义过滤器，需要使用Vue.filter()构造器。这个构造器需要两个参数。
Vue.filter() Constructor Parameters:
1.filterId: 过滤器ID，用来做为你的过滤器的唯一标识；
2.filter function: 过滤器函数，用一个function来接收一个参数，之后再将接收到的参数格式化为想要的数据结果。

示例：实现首字母大写

<div id="app">
    {{message|uppercase}}
</div>
</body>
<script type="text/javascript">
    Vue.filter('uppercase', function(value) {
        if (!value) { return ''}
             value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    })

    var vm = new Vue({
        el:'#app',
        data: {
        message: 'test'
        }
    })

今天就到这儿~

celen_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue.js学习（三）

前言继续前面的学习，上文链接正文今天学习vue.js中的过滤器一.介绍过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。过滤器在指令中由一个管道符 (|) 标记，并可以跟随一个或多个参数。例如使用内置过滤器{PS:（适用于2.0以下版本，2.0以上包括2.0已经废弃内置过滤器，使用时需要自定义过滤器，下面会有提到）。）}capitalize可以将首字母转换成大写：
复制链接

扫一扫

专栏目录