vue 一个数组进行循环,判断循环后的值如果符合条件添加到新的数组中,每次循环判断条件不同,如何实现,全部代码
时间: 2024-03-06 16:49:48 浏览: 82
好的,以下是一个示例代码,用于循环一个数组并根据不同的条件筛选符合条件的元素添加到新的数组中:
```html
<template>
<div>
<!-- 原始数组 -->
<ul>
<li v-for="(item, index) in originalArray" :key="index">{{item}}</li>
</ul>
<!-- 筛选后的数组 -->
<ul>
<li v-for="(item, index) in filteredArray" :key="index">{{item}}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
originalArray: [1, 2, 3, 4, 5],
filteredArray: []
};
},
mounted() {
this.filterArray();
},
methods: {
filterArray() {
for (let i = 0; i < this.originalArray.length; i++) {
if (this.originalArray[i] % 2 === 0) { // 如果元素是偶数
this.filteredArray.push(this.originalArray[i]); // 将元素添加到筛选后的数组中
} else if (this.originalArray[i] > 3) { // 如果元素大于 3
this.filteredArray.push(this.originalArray[i]); // 将元素添加到筛选后的数组中
}
// 可以继续添加其他条件
}
}
}
};
</script>
```
这个示例代码中,我们同样使用了 Vue.js 的循环指令 `v-for` 来循环原始数组和筛选后的数组。在 `filterArray()` 方法中,我们使用了 for 循环来遍历原始数组,并使用了 if 语句来根据不同的条件筛选符合条件的元素。如果符合条件则将元素添加到筛选后的数组中。最终我们在 `mounted()` 生命周期钩子中调用了 `filterArray()` 方法,将筛选后的数组渲染到页面上。
阅读全文