Vue入门2

显示过滤/排序后的结果

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

例如:

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

    在计算属性不适用的情况下 (例如,在嵌套 v-for 循环中) 你可以使用一个方法:

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

    在 v-for 里使用值范围

    v-for 也可以接受整数。在这种情况下,它会把模板重复对应次数。

    {{ n }}

    结果:

    1 2 3 4 5 6 7 8 9 10

    在