关于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项目和微信小程序中生成二维码和条形码是一个常见的需求,主要用于分享、产品识别等场景,这篇文章主要给大家介绍了关于使用Vue3生成二维码和条形码的相关资料,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue:axios请求本地json路径错误问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了vue中axios利用blob实现文件浏览器下载方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要介绍了vue实现导航菜单和编辑文本功能的方法，文中示例代码非常详细，帮助大家更好的参考和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要给大家介绍了关于Vue自定义加水波纹效果指令的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
详解Vue3.0 + TypeScript + Vite初体验
这篇文章主要介绍了详解Vue3.0 + TypeScript + Vite初体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了仿ElementUI实现一个Form表单的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue中@keyup.enter失效问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
今天小编就为大家分享一篇vue改变循环遍历后的数据实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
Vue使用vue-area-linkage实现地址三级联动效果的示例
很多时候我们需要使用地址三级联动，即省市区三级联动，这篇文章主要介绍了Vue使用vue-area-linkage实现地址三级联动效果的示例，感兴趣的小伙伴们可以参考一下2018-06-06
最新评论