写一段已有的二维数组扁平化后,使用按钮进行升降序排序的vue代码
时间: 2024-03-01 07:49:55 浏览: 17
以下是将二维数组扁平化并进行升降序排序的Vue.js代码示例:
```html
<template>
<div>
<button @click="sortAsc">升序排序</button>
<button @click="sortDesc">降序排序</button>
<ul>
<li v-for="(item, index) in sortedArray" :key="index">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
initialArray: [
[5, 10, 3],
[8, 2, 7],
[1, 6, 9]
],
flattenedArray: [],
sortedArray: []
};
},
created() {
this.flattenArray(this.initialArray);
this.sortAsc();
},
methods: {
flattenArray(array) {
this.flattenedArray = array.reduce((acc, val) => acc.concat(val), []);
},
sortAsc() {
this.sortedArray = this.flattenedArray.slice().sort((a, b) => a - b);
},
sortDesc() {
this.sortedArray = this.flattenedArray.slice().sort((a, b) => b - a);
}
}
};
</script>
```
在这个示例中,我们首先定义了一个二维数组 `initialArray`,它包含了三个子数组,每个子数组包含了三个数字。
接下来,在 `created` 钩子函数中,我们调用 `flattenArray` 方法将 `initialArray` 扁平化,并调用 `sortAsc` 方法对扁平化后的数组进行升序排序。
`flattenArray` 方法使用了 JavaScript 的 `reduce` 方法,将每个子数组连接起来并存储在 `flattenedArray` 数组中。
`sortAsc` 方法使用了 JavaScript 的 `slice` 方法,创建了一个扁平化后数组的副本,然后对副本进行升序排序,并将排序后的数组存储在 `sortedArray` 数组中。
`sortDesc` 方法与 `sortAsc` 方法类似,只不过对数组进行了降序排序。
最后,我们在模板中使用 `v-for` 指令遍历 `sortedArray` 数组,并将每个元素显示为列表项。我们还添加了两个按钮,用于在用户点击时切换排序顺序。