关于Vue中过滤器的必懂小知识
更新时间：2021年10月12日 11:24:24 作者：_Peach
vue过滤器可以在不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理,下面这篇文章主要给大家介绍了关于Vue中过滤器必懂小知识的相关资料,需要的朋友可以参考下
前言
大家好，今天来分享下Vue中的过滤器小知识
什么是过滤器
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
如何使用过滤器
全局过滤器
- 本案例是过滤价格中的￥和元
- 示例 ￥1999.00元
- 定义一个capitalize方法，传入value值
- 如果value为空返回空字符串
- 否则就叠加字符串"￥" "元" ，这里的toFixed(2)四舍五入为指定小数位数
使用方法
//main.js
Vue.filter("capitalize", function (value) {
if (!value) return "";
return "￥" + value.toFixed(2) + "元";
});
在双花括号中使用
<!-- home.vue -->
<h1>Vue过滤器</h1>
<p>{{ price | capitalize }}</p>
{{ 20.6664376486 | capitalize }}
在 v-bind 中使用
<h1>Vue过滤器</h1>
<p :id="122 | capitalize"></p>
局部过滤器
这里注意下 当全局过滤器和局部过滤器重名时，会采用局部过滤器。
局部过滤器可以在一个组件的选项中定义本地的过滤器：
export default {
name: 'index',
data() {
return {
price: 1999
}
},
filters: {
capitalize: function (value) {
if (!value) return ''
return '￥' + value.toFixed(2) + '元'
}
}
}
过滤器可以串联
在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
{{ message | filterA | filterB }}
注意：
1、 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右
总结
到此这篇关于Vue中过滤器必懂小知识的文章就介绍到这了,更多相关Vue过滤器小知识内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue中的slot使用插槽分发内容的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue-admin-template 添加、跳转子页面问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue富文本插件(quill-editor)的使用及说明，具有很好的参考价值，希望对大家有所帮助。2023-02-02
这篇文章主要为大家详细介绍了如何使用Vue实现简易的车牌输入键盘效果,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解下2023-11-11
这篇文章主要介绍了Vue3中引入Pinia存储库使用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
ElementUI是一套基于VUE2.0的桌面端组件库,ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面,本文给大家分享elementui简易介绍,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要介绍了vue.js中for循环如何实现异步方法同步执行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
浅谈vue中改elementUI默认样式引发的static与assets的区别
下面小编就为大家分享一篇浅谈vue中改elementUI默认样式引发的static 与assets的区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家详细介绍了vue2.0与bootstrap3实现列表分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了vue-cli4 配置不同开发环境打包命令,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
最新评论