【显示过滤/排序结果】非常实用

最新推荐文章于 2021-08-30 09:34:52 发布

原创最新推荐文章于 2021-08-30 09:34:52 发布 · 847 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue2.0指令

Vue2.0 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在Vue.js中使用计算属性来过滤或排序数组，而不直接修改原始数据。这种方式可以有效避免副作用，并保持数据的纯净。此外，还介绍了在某些特定场景下使用方法(methods)替代计算属性的情况。

有时，我们想要显示一个数组过滤或排序后(filtered or sorted)的副本，而不是实际改变或重置原始数据。在这种情况下，可以创建一个返回过滤或排序数组的计算属性。

例如：

     
      <li v-for="n in evenNumbers">{{ n }}
      </li>

     
      data: {
     
       
      numbers: [ 
      1, 
      2, 
      3, 
      4, 
      5 ]
     
     
      },
     
     
      computed: {
     
       
      evenNumbers: 
      function () {
     
         
      return 
      this.numbers.filter(
      function (number) {
     
           
      return number % 
      2 === 
      0
     
     
          })
     
     
        }
     
     
      }

在计算属性不适用的情况下（例如，在嵌套的 v-for 循环内），可以使用一个 method 方法：

     
      <li v-for="n in even(numbers)">{{ n }}
      </li>

     
      data: {
     
       
      numbers: [ 
      1, 
      2, 
      3, 
      4, 
      5 ]
     
     
      },
     
     
      methods: {
     
       
      even: 
      function (numbers) {
     
         
      return numbers.filter(
      function (number) {
     
           
      return number % 
      2 === 
      0
     
     
          })
     
     
        }
     
     
      }