基础前端

Vue 的过滤器

2019-08-11  本文已影响1人  CondorHero

前言:Vue 中的过滤器(filter)不能替代 Vue 中的 methods、computed 或者 watch等生命周期,过滤器的本质不改变真正 data 里面的数据,而只是改变渲染的结果,并返回过滤后的版本。例如:页面上大小写字母转换,数字换算人命币,添加千字符等。

Vue 的过滤器工作基本没啥用,但面试爱考。

一、定义和使用过滤器

过滤器分为全局定义和局部定义两种方式。

全局定义:任何子组件都能够使用

使用的时候在双花括号中使用管道符(pipeline) |隔开,或者v-bind 表达式(v2.1.0以上支持)
例子小写变大写:

//全局定义
Vue.filter("daxie",function(value){
    return value.toUpperCase()
});

子组件使用

<template>
    <div>
        <h1>{{str | daxie}}</h1>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                str : "abcdefghi",
            }
        }
    }
</script>
<style>
</style>
本过过滤器

五个例子:

注意的是还可以链式使用,但要注意先后的顺序。过滤器函数还可以接收多个参数。

<template>
    <div>
        <div>本地小写变大写 {{str | Upper}}</div>
        <div>本地大写变小写 {{little | Lower}}</div>
        <div>数字添加人民币符号 {{price | toRMB}}</div>
        <div>添加千字符 {{thousands | thousand}}</div>
        <div><b>古诗改错西该为东:</b>{{text | readMore(0,"东")}}</div>
    </div>
</template>
<script>
    export default {
            data(){
                return {
                    str : "abcdefghi",
                    little:"EEEEEEEEEEE",
                    price:15,
                    thousands:"18973573275642767263",
                    text: '西风夜放花千树,更吹落,星如雨。宝马雕车香满路。凤箫声动,玉壶光转,一夜鱼龙舞。蛾儿雪柳黄金缕,笑语盈盈暗香去。众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。'
                }
            },
        // 声明一个本地的过滤器
        filters: {
           Upper: function (value) {
                return value.toUpperCase()
            },
            Lower: function (value) {
                return value.toLowerCase()
            },
            toRMB:function(value) {
                return `¥${value}`;
            },
            thousand:function(value){
                return value.replace(/\B(?=(.{3})+$)/g, ',');
            },
            readMore: function (text, length, suffix) {
                // 后面两个接收参数,这里length为0,suffix为"东"
                return suffix + text.substring(1, text.length)
            }
        }
    }
</script>
<style>
</style>
本过过滤器
上一篇 下一篇

猜你喜欢

热点阅读