Vue 过滤器（|）学习

一、Vue提供的过滤器
vue本身提供了很多便利的过滤器，这里列举一下，具体的可以参考官方文档过滤器。

例子中使用到的data和methods

data:{
        message: 'hello world',
        money: 12345,
        num: [1,2,3,4,5],
        obj: {
            name: 'Linda',
            age: 39,
            sex: 'male'
        },
        arr:[{
            name: 'lily',
            age: 23
        },{
            name: 'lisa',
            age: 24
        },{
            name: 'linda',
            age: 25
        },{
            name: 'tom',
            age: 26
        },{
            name: 'susie',
            age: 21
        }]
    }，
   //用于测试debounce的控制器
     methods: {
        fade: function(){
            document.getElementById('btn-fade').style.display = 'none';
       }
    },

1.capitalize：首字母大写

<div class="item">
    <p>
        <strong>capitalize首字母大写:</strong>
    </p>
    {{ message | capitalize }}
</div>

2.uppercase：转化为大写表示

<div class="item">
    <p>
        <strong>uppercase转换为大写表示:</strong>
    </p>
    {{ message | uppercase }}
</div>

3.lowercase：转化为小写表示

<div class="item">
    <p>
        <strong>lowercase转换为小写表示:</strong>
    </p>
    {{ 'HELLO WORLD' | lowercase }}
</div>

4.currency：格式化货币表示

<div class="item">
    <p>
        <strong>currency输出货币表示第一个参数表示货币符号(默认为$),第二个参数是要保留的小数位数(默认为两位)</strong>:
    </p>
    {{ money | currency '£' 1 }}
</div>

5.pluralize：给值添加后缀

<div class="item">
    <p>
        <strong>pluralize如果只有一个参数，复数形式只是简单地在末尾添加一个 “s”。如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个…复数词。
            如果值的个数多于参数的个数，多出的使用最后一个参数</strong>
    </p>
    <ul v-for="item in num">
        <li>
            {{ item }}{{ item | pluralize 'st' 'nd' 'rd' 'th' }}
        </li>
    </ul>
</div>

6.limitBy：输出数组中从偏移量位置(1)开始,一共4个元素

<div class="item">
    <p>
        <strong>limitBy输出数组中从偏移量位置(num2)开始,一共num1个元素:</strong>
        <span v-for="item in num | limitBy 4 1">{{ item }},</span>
    </p>
</div>

7.filterBy：输出指定字符索引的值

<div class="item">
    <p>
        <strong>输出arr中包含字母'l'的name</strong>
    </p>
    <ul v-for="item in arr | filterBy 'l' in 'name' ">
        <li>{{ item.name }}</li>
    </ul> 
</div>

8.orderBy：对给定的数组中的元素进行排序

<div class="item">
    <p>
        <strong>通过年龄大小进行排序,默认升序.第二个参数的值>0(升序),<0(降序)</strong>
    </p>
    <ul v-for="item in arr | orderBy 'age' 1">
        <li>{{ item.name }}</li>
    </ul>
</div>

二、自定义过滤器

//自定义过滤器
    filters: {
        reverse: function(value){
            return value.split('').reverse().join('')
        }
    }

<div class="item">
     <p>
         <strong>过滤器的本质就是一个函数</strong>
         <p>{{message | reverse}}</p>
     </p>
 </div>

Vue 过滤器（|）学习

猜你喜欢