vue 遍历数组的巧妙之处

Posted 2020-09-05 asteria

vue 的遍历还可以嵌套过滤器来做，通过v-for 遍历一个数组的同时又对数组的每一个对象做一个过滤判断，这样极大的方便了工作者的使用。而它的使用方式也极其简单，只要在计算属性中写一个函数，函数中返回一个过滤器的方法，最后在这个过滤器中返回一个判断即可。判断为真，即满足条件，从而展示。

例子如下：

<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
　　})
}