关于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过滤器小知识内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题
这篇文章主要介绍了vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-07-07vue3+vite中使用import.meta.glob的操作代码
在vue2的时候,我们一般引入多个js或者其他文件,一般使用 require.context 来引入多个不同的文件,但是vite中是不支持 require的,他推出了一个功能用import.meta.glob来引入多个,单个的文件,下面通过本文介绍vue3+vite中使用import.meta.glob,需要的朋友可以参考下2022-11-11vue3使用vue-cli引入windicss报错Can‘t resolve windi.css问题
这篇文章主要介绍了vue3使用vue-cli引入windicss报错Can‘t resolve windi.css问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论