冒泡算法怎么用vue写

冒泡排序算法是一种经典的排序算法，Vue 是一种流行的 JavaScript 框架，可以用来构建交互式的 web 应用程序。在 Vue 中，你可以使用数据绑定和计算属性等功能来实现冒泡排序算法。

下面是一个使用 Vue 实现冒泡排序算法的示例：

<template>
  <div>
    <h2>Bubble Sort</h2>
    <p>Original Array: {{ array }}</p>
    <p>Sorted Array: {{ sortedArray }}</p>
  </div>
</template>

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

在这个示例中，我们使用了 Vue 的计算属性 `bubbleSort` 来实现冒泡排序算法，将排序后的结果保存到 `sortedArray` 中，然后在 `created` 钩子中将其赋值给 `sortedArray`，以在模板中显示出来。

你可以将上面的示例复制到一个 Vue 单文件组件中，然后使用 `vue-cli` 或其他打包工具构建和运行该应用程序，以在浏览器中查看结果。