当前位置：首页 > VUE

vue如何实现冒泡

2026-01-07 01:20:09VUE

Vue 实现冒泡排序

在 Vue 中实现冒泡排序，可以通过数据绑定和响应式特性动态展示排序过程。以下是一个完整的实现示例，包含代码和详细说明。

数据准备

在 Vue 的 data 中定义一个数组作为排序目标，并添加控制排序过程的变量：

data() {
  return {
    items: [5, 3, 8, 4, 2], // 待排序数组
    sorting: false,          // 是否正在排序
    currentIndex: 0,         // 当前比较的索引
  };
}

冒泡排序算法实现

通过方法封装冒泡排序逻辑，使用 setTimeout 分步展示排序过程：

methods: {
  startSorting() {
    if (this.sorting) return;
    this.sorting = true;
    this.bubbleSort();
  },

  bubbleSort() {
    if (this.currentIndex >= this.items.length - 1) {
      this.currentIndex = 0;
      this.sorting = false;
      return;
    }

    if (this.items[this.currentIndex] > this.items[this.currentIndex + 1]) {
      // 交换元素
      [this.items[this.currentIndex], this.items[this.currentIndex + 1]] = 
      [this.items[this.currentIndex + 1], this.items[this.currentIndex]];
    }

    this.currentIndex++;
    setTimeout(this.bubbleSort, 500); // 延迟500ms执行下一步
  }
}

模板展示

在模板中绑定数据和事件，并高亮当前比较的元素：

<template>
  <div>
    <div class="items">
      <div 
        v-for="(item, index) in items" 
        :key="index"
        :class="{ active: index === currentIndex && sorting }"
      >
        {{ item }}
      </div>
    </div>
    <button @click="startSorting" :disabled="sorting">
      {{ sorting ? '排序中...' : '开始排序' }}
    </button>
  </div>
</template>

样式增强

通过 CSS 高亮当前比较的元素：

.items {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.items div {
  padding: 10px;
  border: 1px solid #ccc;
}
.items .active {
  background-color: #ffeb3b;
}