VUE过滤器过滤器在vue属性中的filters中定义过滤器，可被用于一些常见的文本，对它们进行格式化过滤器可以用在

过滤器

在vue属性中的filters中定义过滤器，可被用于一些常见的文本，对它们进行格式化

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)

过滤器应该被添加在JavaScript表达式的尾部，由管道符号指示

语法

<p>
    {{ message | filter }}
</p>

<p v-bind:type="message | filter"> </p>

demo

过滤器本质上是一个函数，比如我们定义一个将表单输入的内容中所有的字母变大写的过滤器

<body>
    <div v-cloak id="container">
        <input type="text" v-model="message">
        <p>展示: {{ message | toUpper }}</p>
    </div>
</body>

var vm = new Vue({
    el: "#container",
    data: {
        message: "",
    },
    filters: {
        toUpper: function (value) {
            if (!value) return '' // 字符串内容为空 直接返回
            console.log("正在变大小")
            return String(value).toUpperCase()
        }
    }
})

多参过滤器

过滤器函数也可以有多个参数

{{ message | filter(arg1, arg2) }}
// message 第一个参数
// arg1 第二个参数
// arg2 第三个参数

<div v-cloak id="container">
    <input type="text" v-model="message">
    <p>展示: {{ message | toLong("| "," |") }}</p>
</div>

filters: {
    toLong(value,arg1,arg2){
        if (!value) return ''
        return arg1 + value + arg2
    }
}