Vue学习—深入剖析过滤器

一、深入剖析过滤器

1.认识过滤器

自定义过滤器，用于一些常见的文本格式化。
过滤器可用在两个地方：双花括号插值 和 v-bind 表达式，添加在JS表达式的尾部，由“管道”符号表示:

<!-- 在双花括号中 -->
{{ message | filter }}

<!-- 在 v-bind 中 -->
<div v-bind:id="id | filter"></div>

2.定义过滤器

全局过滤器：

<script>
    Vue.filter('filter1',()=>{
        
    });
</script>

局部过滤器：

<script>
    const vm = new Vue({
        el: '#app',
        data: {

        },
        filters: {

        }
    });
</script>

3.参数

当过滤器形式为 msg | filter 时，filter过滤器接收一个参数，参数为msg。

当过滤器形式为 msg | filter('a')时，filter过滤器接收两个参数，参数为msg, 'a'

<div id="app">
    {{ msg | filter1('a') }}
</div>
<script>
    Vue.filter('filter1',(val,a)=>{
        console.log(a);
        return Number(val);   
    });
    const vm = new Vue({
        el: '#app',
        data: {
            msg: 'gg1314520'
        }
    });
</script>

4.过滤器串联

{{ msg | filterA | filterB }}

在这个例子中，filterA的参数为msg，filterB的参数为filterA，即filterA处理后将结果再交给filterB处理，最后返回。

5.练习

1.首字母大写

<div id="app">
    {{ content | filter1 }}
</div>
<script>
    Vue.filter('filter1',(val)=>{
        if(!val) { return };
        return val.charAt(0).toUpperCase() + val.slice(1); 
    });
    const vm = new Vue({
        el: '#app',
        data: {
            content : 'jimo'
        }
    });
</script>

2.数字中间加上逗号

<div id="app">
    {{ money | toMoney }}
</div>
<script>
    Vue.filter('toMoney',(value)=>{
        if(!value) { return };
        return value.toLocaleString();
    });
    const vm = new Vue({
        el: '#app',
        data: {
            money: 1314520555
        }
    });
</script>

3.数字添加文字“万”

<div id="app">
    {{ money | addWord }}
</div>
<script>
    Vue.filter('addWord',(value)=>{
        if(!value) { return };
        if(value > 10000) {
            return ( value / 10000).toFixed(1) + '万';
        }
        return value;
    });
    const vm = new Vue({
        el: '#app',
        data: {
            money: 1314520555,
            content : 'jimo'
        }
    });
</script>