Vue简单实例——过滤器

简单介绍：

Vue的过滤器本质上一个函数，他的作用是在用户传递进来一个参数之后，对数据进行一定的操作之后返回一个结果

代码实现：

注册过滤器：使用Filter节点，因为过滤器的本质是一个函数，所以内部的逻辑处理使用一个方法进行定义，并且过滤器一定要有一个返回值

<template>
  <div>
<!--    使用v-model的修饰符将接收到的数据类型修改为Number-->
    <input type="text" v-model.number="index">
    {{index | rollback}}
  </div>
</template>

<script>
export default {
  name: "Filter_Demo",
  filters:{
    rollback(value){
      return value.toFixed(2)
    }
  },
  data(){
    return {
      index:123
    }
  }
}
</script>

<style scoped>

</style>

运行效果：上面的代码的运行效果如下

注意点：

在我们使用v-model双向绑定数据的时候，一定要注意接受的数据的类型，有些方法只能在Number数据类型的时候才可以使用

案例描述：

在了解了过滤器如何定义和使用之后，我们做一个简单的案例。在实例中的数据中，有时会以状态码的形式存储数据，但是在展示的时候需要将状态码转换成对应的信息，就用过滤器实现这个效果

显示效果：

 

代码实现：

<template>
  <div>
    <ul>
      <li v-for="(good,index) in Goods" :key="index">{{index+1}}-{{good.name}}-{{good.state | JudgeStatus}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Filter_instance",
  data(){
    return {
      Goods:[
        {
          name:'百事可乐',
          state:1
        },
        {
          name:'可口可乐',
          state:0
        },
        {
          name:'崂山可乐',
          state:1
        }
      ]
    }
  },
  filters:{
    JudgeStatus(state){
      if(state === 1){
        return '已支付'
      }else {
        return '未支付'
      }
    }
  }
}
</script>

<style scoped>

</style>

注意点：

注意在使用v-for循环的时候添加:key="index"的属性，在添加循环的变量的时候注意变量所代表的内容，第一个参数表示数据对象，第二个参数表示序号