当前位置：首页 > VUE

冒泡排序动画vue实现

2026-01-21 20:58:53VUE

冒泡排序动画的 Vue 实现

冒泡排序是一种简单的排序算法，通过重复遍历列表，比较相邻元素并交换顺序错误的元素。在 Vue 中实现冒泡排序动画可以通过数据绑定和过渡效果直观展示排序过程。

核心实现步骤

数据准备 定义一个数组作为排序目标，并添加必要的样式控制动画效果：

data() {
  return {
    items: [5, 3, 8, 4, 2],
    sorting: false
  }
}

排序算法实现 实现冒泡排序算法，并在每次交换时更新数组以触发视图更新：

methods: {
  async bubbleSort() {
    this.sorting = true;
    let arr = [...this.items];
    for (let i = 0; i < arr.length - 1; i++) {
      for (let j = 0; j < arr.length - i - 1; j++) {
        if (arr[j] > arr[j + 1]) {
          [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
          this.items = [...arr];
          await new Promise(resolve => setTimeout(resolve, 500));
        }
      }
    }
    this.sorting = false;
  }
}

动画效果实现

模板结构 使用 Vue 的过渡效果和动态样式：

冒泡排序动画vue实现

<template>
  <div>
    <button @click="bubbleSort" :disabled="sorting">开始排序</button>
    <div class="sort-container">
      <div 
        v-for="(item, index) in items" 
        :key="index"
        class="sort-item"
        :style="{ height: `${item * 30}px` }"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

样式设计 添加 CSS 过渡效果使交换过程更平滑：

.sort-container {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.sort-item {
  width: 50px;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

功能扩展

排序状态指示 添加视觉反馈显示当前排序状态：

冒泡排序动画vue实现

<div v-if="sorting" class="sorting-indicator">排序中...</div>

性能优化 对于大型数组可以调整延迟时间或添加暂停/继续功能：

data() {
  return {
    delay: 300,
    paused: false
  }
}

重置功能 添加重置按钮恢复初始状态：

methods: {
  reset() {
    this.items = [5, 3, 8, 4, 2];
  }
}

完整示例

以下是一个完整的 Vue 单文件组件实现：

<template>
  <div>
    <button @click="bubbleSort" :disabled="sorting">开始排序</button>
    <button @click="reset" :disabled="sorting">重置</button>
    <div v-if="sorting" class="sorting-indicator">排序中...</div>
    <div class="sort-container">
      <div 
        v-for="(item, index) in items" 
        :key="index"
        class="sort-item"
        :style="{ height: `${item * 30}px` }"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [5, 3, 8, 4, 2],
      sorting: false,
      delay: 500
    }
  },
  methods: {
    async bubbleSort() {
      this.sorting = true;
      let arr = [...this.items];
      for (let i = 0; i < arr.length - 1; i++) {
        for (let j = 0; j < arr.length - i - 1; j++) {
          if (arr[j] > arr[j + 1]) {
            [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
            this.items = [...arr];
            await new Promise(resolve => setTimeout(resolve, this.delay));
          }
        }
      }
      this.sorting = false;
    },
    reset() {
      this.items = [5, 3, 8, 4, 2];
    }
  }
}
</script>

<style>
.sort-container {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.sort-item {
  width: 50px;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.sorting-indicator {
  margin: 10px 0;
  color: #e74c3c;
}
</style>