vue如何实现冒泡
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;
}完整示例说明
- 响应式更新：Vue 的响应式系统会自动更新 DOM，无需手动操作。
- 分步演示：通过
setTimeout实现动画效果，每步间隔 500ms。 - 状态控制：
sorting变量防止重复触发排序，currentIndex跟踪当前比较位置。 - 可视化效果：通过 CSS 高亮当前比较的元素，提升交互体验。
运行此代码后，点击按钮会逐步展示冒泡排序的过程，每次比较后会更新界面显示。
