vue 过滤器实现和使用场景举例

最新推荐文章于 2024-01-17 13:08:31 发布

木子聊前端

最新推荐文章于 2024-01-17 13:08:31 发布

阅读量1.2k

点赞数

分类专栏： vue

原文链接：http://www.chinaynlmq.cn/article/202011091058/

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在生活中把一些含有我们需要的东西但是比较粗旷通过一定的装置过滤出更接近需要的产品，这个装置大概就是过滤器。
比如：过滤沙子的纱网，经过纱网过滤可以得出精细的沙子；程序编写通常也会有很多类似的骚操作，在vue中提供自定义过滤器，
得到更需要的精准数据，来了解一下

需求：

展示一个产品的价格price。

解析需求：

产品的价格可能包含小数点，可能该产品还未定义用‘–’来表示

开发需求

前端从后端获取一个价格数据字段price，这个字段可能包含的结果是null，‘ ’，或者是undefined ，这个时候在页面用‘——’展示，如果是正常的数据
如10.99 就直接显示

以下所有的代码均在vue中开发实现

JavaScript思维原生实现

定义一个方法来来处理，获取到的数据，处理然后使用

vue的HTML模板

<div id="app">
    {{price}}元
 </div>

JavaScript

export default {
  name: 'App',
  data (){
    return {
      price:''
    }
  },
  created() {
	  // 模拟后台动态获取数据
    setTimeout(()=>{
		// 00，‘’，null 等行为
      let ajaxPrice='11.00';
       this.formatPrice( ajaxPrice)
    },1000)
  },
  methods: {
    formatPrice(value){
      if (value === null || value === '' || value === undefined) {
       this.price ='--';
      }
      this.price = value;
    }
  },
}

这样就可以完美的实现数据格式的转变，在整个js代码中没有任何问题，同样也可以扩展，那么为什么vue还要高一个自定义过滤器？
先用vue的过滤器来实现以下看看。有什么区别

vue过滤器实现

vue的HTML模板

<div id="app">
    {{price|formatPrice}}元
  </div>

vue过滤器的实现部分

filters:{
    formatPrice(value){
      if (value === null || value === '' || value === undefined) {
       return '--';
      }
      return value;
    }
  }

明显区别：

1、JavaScript 通过在业务代码中添加方法，达到格式化的目的；vue定义的过滤器则剥离开业务代码，在模版中格式化，更具有可读性和选择性
2、JavaScript原生思维语意话不明显，vue过滤器直接就知道该方法是用了过滤格式化的filters {}里面定义，更加规范
3、减少变量的耦合性，JavaScript中定义了中间变量来处理，vue过滤器则不需要

估计还有其他区别，需要明确的是在整个vue项目中的对比，想表达的是在vue项目中就按照vue的框架办事，可以事半功倍

vue过滤器

vue 官网文档定义：

1、用于一些常见的文本格式化
2、用在双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)
3、添加在 JavaScript 表达式的尾部

使用的地方

一、在双花括号中使用，如上面价格的例子

  {{price|formatPrice }}元

由“管道”符号来实现
formatPrice 可以理解为过滤器函数，而price就是需要格式化的数据，通过vue特定的方式传递到formatPrice函数进行处理最终得到格式化的数据

二、在 v-bind 中属性格式化

<div id="app" :sr='price|formatPrice'>
</div>

结果和在双花括号是是一样的

综上所述，使用很简单，语意也很明显，维护方便一眼便知

那么如何定义过滤器呢！

定义过滤器

点击继续阅读原文