Vue中的过滤器是什么
过滤器（filter）是输送介质管道上不可缺少的一种装置,大白话，就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数。
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
Vue 允许你自定义过滤器，可被用于一些常见的文本格式化
ps: Vue3中已废弃filter
Vue中的过滤器如何用
vue中的过滤器可以用在两个地方：双花括号插值和 v-bind 表达式(:)，过滤器应该被添加在 JavaScript表达式的尾部，由“管道”符号指示.
使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
定义filter
在双花括号中：
{{ message | capitalize }} 在 v-bind 简写:中:
<div :id="rawId | formatId></div>
在组件的选项中定义本地的过滤器（局部过滤器）
局部过滤器举例
<template>
<div>
<input type="text" v-model="filterCount">
<div class="filter">{{ filterCount | changeCapitalLetter }}</div>
</div>
</template>
<script>
export default{
data(){
return{
filterCount:"hello"
}
},
filters:{
changeCapitalLetter(val){
if(!val) return ''
let newArr = val.toString().split(" ").map(ele=>{
return ele.CharAt(0).toUpperCase()+ele.slice(1)
})
return newArr.join(" ")
}
}
</script>全局过滤器举例
filter.js
export default tool(val){
return val > 10 ? val : 0+val
} main.js
import Vue from "vue"
import { tool } from "./filter.js"
Vue.filter('tool',tool) 注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器
过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数
过滤器可以串联
{{message | filterA | filterB}}在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
过滤器是 JavaScript函数，因此可以接收参数：
{{message | fliterA('arg1',arg2)}}这里，filterA 被定义为接收三个参数的过滤器函数。
其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数
小结：
局部过滤器优先于全局过滤器被调用一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右
过滤器：
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
通过以上内容我们知道了vue中过滤器有什么作用及详解。感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！