10-11 02:55 阅读 154

关注

程序员必懂小知识之Vue中的过滤器

前言

• 大家好，我是_Peach，今天来分享下Vue中的过滤器小知识

什么是过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

如何使用过滤器

全局过滤器

1. 本案例是过滤价格中的￥和元

2. 示例 ￥1999.00元

3. 定义一个capitalize方法，传入value值

4. 如果value为空返回空字符串

5. 否则就叠加字符串"￥" "元" ，这里的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 }}

作者：_Peach
链接：https://juejin.cn/post/7017633563734441991