用vue写一个冒泡排序

Sure, 我可以帮你解决这个问题。

首先，你需要在Vue组件中定义一个函数，例如`bubbleSort`。然后，你可以在该函数内部实现冒泡排序算法。以下是一个示例代码：

<template>
  <div>
    <h2>冒泡排序</h2>
    <p>排序前的数组：{{beforeList}}</p>
    <p>排序后的数组：{{afterList}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      beforeList: [3, 9, 2, 6, 4, 1],
      afterList: [],
    };
  },
  mounted() {
    this.bubbleSort();
  },
  methods: {
    bubbleSort() {
      let arr = this.beforeList;
      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;
          }
        }
      }
      this.afterList = arr;
    },
  },
};
</script>

<style>
h2 {
  font-size: 16px;
  font-weight: bold;
}
</style>

在上面的示例代码中，我们将要排序的数组定义为`beforeList`。`bubbleSort`函数中实现了冒泡排序算法，将排序后的结果保存在`afterList`数组中。最终，我们在模板中展示了排序前和排序后的数组。

希望这可以帮到你！