Day 27. 过滤器 - Filter

今天是三天连假的第一天，实体上课真的太累了，一不小心睡到下午诶嘿(๑´ڡ`๑)连假过完铁人也差不多完成了!时间真的过的飞快啊，今天来讲讲vue的过滤器，虽然在这边出现顺序有点混乱，但没关系的对吧o(｀ω´ )o

Filters 过滤器

Vue的过滤器主要用来格式化数据、文字等资料，像是转换日期显示方法、千分号：$1,000、英文大小写转换等状况。

Filters写法

规则:

Vue.filter(dataName, filterFunction){
     // 过滤器处理过程
})

dataName是过滤器的名称，用|(pipe)分隔，filterFunction是过滤器的函式名称
主要的写法分为两种：

插值表达写法 {{ dataName | filterFunction }}
v-bind写法 <div v-bind:id="dataName | filterFunction"></div>

特性

可以使用|(pipe)串联多个不同的filter(数量不限)
由左到右执行(顺序将影响结果) EX: {{ price | filterComma | filterDollarSign }}
注册方式：分为区域注册、全域注册

Local filters 本地/区域过滤器

我们可以在一个组件的option中定义本地的过滤器(Local filters的范围仅在Vue Instance 中)。
这个例子我们在数字前面加上钱钱$符号:

<div id="app">
    <p>{{ price | filterDollarSign }}</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            price:123456
        },
        filters: {
            filterDollarSign(price) {
                return '$' + price;
            }
        }
    });
</script>

Global filters全域过滤器

全局过滤器要在创建Vue instance前先定义好，当全域过滤器和区域过滤器名字重复时，会采用局部过滤器欧!
这个例子我们让名字的字首变成大写:

<div id="app">
    name:<input type="text" v-model="name" />
    <div>{{name | upper}}</div>
</div>

<script>
    // 定义过滤器
    Vue.filter('upper', function (val) {
        return val.charAt(0).toUpperCase()+val.slice(1);
    })
    var vm = new Vue({
        el: '#app',
        data: {
            name: ''
        },
    });
</script>

串联多个Filters

用第一个例子来示范，串联多个filters的时候执行顺序是由左到右欧!
我们用filterComma来将数字变成千分位，加上逗点;用filterDollarSign在数字前加上钱钱$符号。

<div id="app">
    <p>{{ price | filterComma | filterDollarSign }}</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            price:123456
        },
        filters: {
            filterDollarSign(price) {
                return '$' + price;
            },
            filterComma(price) {
                return price.toLocaleString('en-US');
            }
        }
    });
</script>