最新Vue过滤器介绍及使用方法
更新时间：2022年11月03日 15:15:19 作者：亦世凡华
过滤器是vue为开发者提供的功能，常用于文本的格式化，过滤器应该被添加在JavaScrip表达式的尾部，由“管道符”进行调用，这篇文章通过案例给大家讲解Vue过滤器介绍及使用方法，需要的朋友参考下吧
过滤器
过滤器的兼容性
注意：Vue3中明确取消了过滤器这个功能，如果想使用只能在Vue2中进行，如果所做的项目是Vue2的话，可以了解一下这个功能点，至少会使用就行。
在企业级项目开发中：
如果使用的是2.x版本的vue，则依然可以使用过滤器相关功能
如果项目已经升级到了3.x版本的vue，官方建议使用计算属性或方法代替被剔除的过滤器功能，
过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和v-bind属性绑定。过滤器应该被添加在JavaScrip表达式的尾部，由“管道符”进行调用，案例如下：
<body>
<div id="root">
<p>message的值是:{{message | capi}}</p>
</div>
<script src="vue.js"></script>
<script>
const vm = new Vue({
el:"#root",
data:{
message:"hello Vue.js"
},
//过滤器函数，必须定义到filters节点之下，过滤器本质上是函数
filters:{
//注意：过滤器函数形参中的val，永远都是“管道符”前面的那个值
capi(val){
// console.log(val);
// charAt()字符串方法，接收索引值，表示从字符串中把索引值对应的字符获取出来
const first = val.charAt(0).toUpperCase()
// slice()字符串方法1，可以截取字符串，从指定索引值往后截取
const other = val.slice(1)
//强调：过滤器中一定要有返回值
return first+other
}
}
})
</script>
</body>
私有过滤器和全局过滤器
在filters节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前vm实例所控制的el区域内使用。如上面设置的过滤器就是私有过滤器；如果希望在多个vue实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：
// 全局过滤器 - 独立于每个 vm 实例之外
// Vue.filter() 方法接收两个参数
// 第一个参数：是全局过滤器的”名字“
// 第二个参数：是全局过滤器的”处理函数“
Vue.filter('capi',(str)=>{
return str.charAt(0).toUpperCase() + str.slice(1)
})承接上面的例子我们可以看看全局过滤器和私有过滤器的区别：
<body>
<div id="root">
<p>message的值 是:{{message | capi}}</p>
</div>
<div id="root1">
<p>message的值 是:{{message | capi}}</p>
</div>
<script src="vue.js"></script>
<script>
// 提醒大家一下：全局过滤器要放在Vue实例化代码前面，不然会报错
Vue.filter('capi',(str)=>{
// 为了区别全局过滤是否会对私有过滤进行覆盖，将全局过滤加一个特征
return str.charAt(0).toUpperCase() + str.slice(1)+'~~~'
})
const vm = new Vue({
el:"#root",
data:{
message:"hello Vue.js"
},
filters:{
capi(val){
const first = val.charAt(0).toUpperCase()
const other = val.slice(1)
return first+other
}
}
})
const vm1 = new Vue({
el:"#root1",
data:{
message:"hello world"
},
})
</script>
</body>
注意点：
1）要定义到 filters 节点下，本质是一个函数
2）在过滤器函数中，一定要有return值
3）在过滤器的形参中，就可以获取到“管道符”前面待处理的那个值
4）如果全局过滤器和私有过滤器名字一致，按照就近原则，调用的是“私有过滤器”
过滤器的连续调用
过滤器可以串联地进行调用，例如：
//在插值表达式中可以使用多个过滤器如下：
//过滤器filterA从它前面的message得到的处理结果，将filterA的return返回值再交给filterB进行处理
//最终把filterB处理的结果，作为最终的值渲染到页面上
<div id="root">
{{message | filterA | filterB}}
</div>过滤器进行传参
过滤器本质上是JavaScript函数，因此可以接收参数，格式如下：
<!-- arg1 和 arg2 是传递给 filterA 的参数 -->
<p>{{ message | filterA(arg1,arg2) }}</p>
//过滤器处理函数的形参列表中:
//第一个参数：永远都是“管道符”前面待处理的值
//从第二个参数开始，才是调用过滤器时传递过来的 arg1 和 arg2 参数
Vue.filter('filterA',(msg,agr1,arg2)=>{
//过滤器的代码。。。
})到此这篇关于最新Vue过滤器介绍及使用方法的文章就介绍到这了,更多相关vue过滤器使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解Vue路由自动注入实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
基于uniapp+vue3自定义增强版table表格组件「兼容H5+小程序+App端」
uv3-table：一款基于uniapp+vue3跨端自定义手机端增强版表格组件,支持固定表头/列、边框、斑马纹、单选/多选,自定义表头/表体插槽、左右固定列阴影高亮显示,支持编译兼容H5+小程序端+App端,H5+小程序+App端,多端运行一致2024-05-05
vue2.0 中使用transition实现动画效果使用心得
这篇文章主要介绍了vue2.0 中使用transition实现动画效果使用心得，本文通过案例知识给大家介绍的非常详细，需要的朋友参考下吧2018-08-08
在开发基于Vue.js的应用时,随着项目规模的扩大,单个文件的体积也会随之增长,特别是当涉及到大量的依赖库和复杂的业务逻辑时,本文将详细介绍如何使用Webpack来优化Vue项目的打包流程,需要的朋友可以参考下2024-09-09
这篇文章主要为大家详细介绍了vue3+vite2实现动态绑定图片的优雅解决方案,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
这篇文章主要介绍了Vue.js之VNode的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了Vue-cli 如何将px转化为rem适配移动端,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-07-07
本文通过实例代码给大家介绍了vue中的ElementUI的使用，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue实现动态给data函数中的属性赋值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue是一种轻巧便捷的框架，那么如何进行对于数据加载的刷新呢？以下就是我对于vue.js数据加载的一点想法2017-06-06
最新评论