vue 中的filter 过滤器的使用

失う.

于 2021-05-28 11:01:27 发布

阅读量529

点赞数

CC 4.0 BY-SA版权

文章标签： filter 过滤器

本文链接：https://blog.youkuaiyun.com/weixin_49346957/article/details/117354712

本文详细介绍了Vue.js中的filter过滤器如何作为筛选工具，通过反转字符串案例演示其用法。讲解了全局和局部过滤器的区别，并展示了如何自定义filter。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：filter过滤器是一个很常用的方法。
也可以说他是一个门口的守卫，
因为他会把符合条件的放进来，不符合条件的就会挡在外面
还会对符合条件的进行一些处理
所以filter的作用就是筛选，然后操作符合条件的

使用的位置是在{{}}内

{{ str|filterA }}  单个使用。

{{ str| filterA| filterB }} 多个连用。

举一个反转字符串的案例

（谁用这个过滤器谁里面的字符串就会被反转）

全局过滤器

<div id="box">
     {{str|filterA}}
</div> 
<script>
// filterA是过滤器自定义的名字
  Vue.filter('filterA',function(data){
    return data.split('').reverse().join('')
    })
          
    var VM = new Vue({
        el:"#box",
        data:{
            str:'abcde',
        }
    })
</script>

局部过滤器

(只能在组件内使用)

<div id="box">
    {{str|filterA}}
</div> 
<script>
var VM = new Vue({
        el:"#box",
        data:{
            str:'abcde',
        },
		filters:{
			//过滤器名字
			filterA(data):{
				return data.split('').reverse().join('')
			}
		}
        
    })
</script>