Vue3中删除了过滤器filter功能-如何使用computed和methods实现filter功能

Posted 2022-02-05 JackieDYH

使用computed和methods实现filter功能

案例演示 

基础代码

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>快递公司: item.deliverCompany </li>
      <li>运输状态: item.expressState </li>
    </ul>
  </div>
</template>

<script>
export default 
  data() 
    return 
      arr: [
        
          deliverCompany: "快递1",
          expressState: "1",
        ,
        
          deliverCompany: "快递2",
          expressState: "2",
        ,
        
          deliverCompany: "快递3",
          expressState: "3",
        ,
        
          deliverCompany: "快递4",
          expressState: "4",
        ,
        
          deliverCompany: "快递5",
          expressState: "5",
        ,
        
          deliverCompany: "快递6",
          expressState: null,
        ,
      ],
    ;
  ,
;
</script>

filter实现

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>快递公司: item.deliverCompany </li>
      <!-- 使用过滤器语法 -->
      <li>运输状态: item.expressState | showState </li>
    </ul>
  </div>
</template>

<script>
export default 
  data() 
    return 
      ......
    ;
  ,
  // 在组件内定义，然后根据不同的状态返回不同的值内容
  filters: 
    showState(state) 
      switch (state) 
        case "1":
          return "待发货";
          break;
        case "2":
          return "已发货";
          break;
        case "3":
          return "运输中";
          break;
        case "4":
          return "派件中";
          break;
        case "5":
          return "已收货";
          break;
        default:
          return "快递信息丢失";
          break;
      
    ,
  ,
;
</script>

computed实现

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>快递公司: item.deliverCompany </li>
      <!-- 使用计算属性 -->
      <li>运输状态: computedText(item.expressState) </li>
    </ul>
  </div>
</template>

<script>
export default 
  data() 
    return 
      ......
    ;
  ,
  computed: 
    computedText() 
      // 计算属性要return一个函数接收参数
      return (state)=>
        switch (state) 
          case "1":
            return "待发货";
            break;
          case "2":
            return "已发货";
            break;
          case "3":
            return "运输中";
            break;
          case "4":
            return "派件中";
            break;
          case "5":
            return "已收货";
            break;
          default:
            return "快递信息丢失";
            break;
        
      ;
    ,
  ,
;
</script>

methods实现

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>快递公司: item.deliverCompany </li>
      <!-- 使用方法 -->
      <li>运输状态: methodsText(item.expressState) </li>
    </ul>
  </div>
</template>

<script>
export default 
  data() 
    return 
      ......
    ;
  ,
  methods: 
    methodsText(state) 
      switch (state) 
        case "1":
          return "待发货";
          break;
        case "2":
          return "已发货";
          break;
        case "3":
          return "运输中";
          break;
        case "4":
          return "派件中";
          break;
        case "5":
          return "已收货";
          break;
        default:
          return "快递信息丢失";
          break;
      
    ,
  ,
;
</script>

Vue3删去了重复的功能，使用computed和methods也可以实现filter功能