第十四节:带你梳理Vue2:filters过滤器

过滤器是什么?

过滤器是一种在模板中处理数据的便捷方式, 会经常在其他模板语言中见到, 他们特别适合对字符串和数字进行简单的显示变化.

1. 通过案例理解过滤器

示例: 对于数字价格处理

1.1 Mastache语法中处理价格数字

<div id="app">
    <!-- 正常处理 -->
    <p>苹果价格:{
  
  { (priceOne/100).toFixed(2) }} 元/斤</p>
    <p>梨子价格:{
  
  { (priceTwo/100).toFixed(2) }} 元/斤</p>
    <p>香蕉价格:{
  
  { (priceThree/100).toFixed(2) }} 元/斤</p>

</div>

<script>   

    const vm = new Vue({
     
     
        el: "#app",
        data: {
     
     
            priceOne: 2312,
            priceTwo: 1825,
            priceThree: 1634,
        }
    })
</script>

我们就会发现一件事情, 同样的逻辑我们要处理三次,这种处理方案,页面需要使用到多少次价格,我们就需要处理多少次相同的逻辑

我们在回顾到目前为止我们所学的知识, 有什么方方案可以很好的将逻辑抽离出来吗, 计算属性和侦听器显然不合适,因为都需要检测依赖数据的变化, 有多少数据就需要多少的计算属性,和多少的侦听器, 反而不美

想来想去,定义一个方法通过接受不同的参数来处理我们的相同的逻辑,每次只要调用这个方法就可以了,挺不错的, 尝试一下

1.2 方法处理相同逻辑

<div id="app">
    <!--  使用方法处理价格 -->
    <p>苹果价格:{
  
  { priceHandle(priceOne)}} 元/斤</p>
    <p>梨子价格:{
  
  { priceHandle(priceTwo)}} 元/斤</p>
    <p>香蕉价格:{
  
  { priceHandle(priceThree)}} 元/斤</p>

</div>

<script>   

    const vm = new Vue({
     
     
        el: "#app",
        data: {
     
     
            priceOne: 2312,
            priceTwo: 1825,
            priceThree: 1634,
        },
        methods:{
     
     
            priceHandle(price){
     
     
                return (price/100).toFixed(2)
            }
        }
    })
</script>

方法也有不美之处,就是寓意化不够明确,所有的事情都需要定义方法来处理, 那么方法的耦合性就会很高

所以对于数据的先期处理, vue给我们提供了过滤器 filters

1.3 使用filters 过滤器处理数据

注意过滤器的方法定义在filters属性中

<div id="app">
    <!-- 过滤器 filter -->
    <p>苹果价格:{
  
  { priceOne | formatPrice}} 元/斤</p