当前位置：首页 > VUE

vue如何实现冒泡

2026-01-11 23:51:32VUE

Vue 实现冒泡排序的步骤

在 Vue 中实现冒泡排序，可以通过数据绑定和计算属性来动态展示排序过程。以下是一个完整的实现示例。

示例代码

<template>
  <div>
    <h3>原始数组: {{ originalArray }}</h3>
    <button @click="bubbleSort">开始排序</button>
    <h3>排序后数组: {{ sortedArray }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalArray: [5, 3, 8, 4, 2],
      sortedArray: []
    };
  },
  methods: {
    bubbleSort() {
      let arr = [...this.originalArray];
      let len = arr.length;
      for (let i = 0; i < len - 1; i++) {
        for (let j = 0; j < len - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
          }
        }
      }
      this.sortedArray = arr;
    }
  }
};
</script>

代码说明

数据初始化
在 data 中定义 originalArray 和 sortedArray，分别存储原始数组和排序后的数组。
冒泡排序方法
在 methods 中定义 bubbleSort 方法，使用双重循环遍历数组并比较相邻元素，交换位置以实现排序。
模板绑定
在模板中通过 {{ originalArray }} 和 {{ sortedArray }} 动态显示数组内容，点击按钮触发排序方法。

动态展示排序过程

如果需要逐步展示排序过程，可以使用 setTimeout 或 Vue 的异步更新机制。

<template>
  <div>
    <h3>当前数组: {{ currentArray }}</h3>
    <button @click="startBubbleSort">开始排序</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalArray: [5, 3, 8, 4, 2],
      currentArray: []
    };
  },
  mounted() {
    this.currentArray = [...this.originalArray];
  },
  methods: {
    async startBubbleSort() {
      let arr = [...this.currentArray];
      let len = arr.length;
      for (let i = 0; i < len - 1; i++) {
        for (let j = 0; j < len - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
            this.currentArray = [...arr];
            await new Promise(resolve => setTimeout(resolve, 1000));
          }
        }
      }
    }
  }
};
</script>