前端vue冒泡排序写法

以下是前端Vue冒泡排序的实现代码：

<template>
  <div>
    <h2>冒泡排序</h2>
    <div>
      <span>原始数组：</span>
      <span v-for="(item, index) in arr" :key="index">{{item}} </span>
    </div>
    <div>
      <span>排序后数组：</span>
      <span v-for="(item, index) in bubbleSort(arr)" :key="index">{{item}} </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [5, 9, 3, 1, 2, 8, 4, 7, 6],
    };
  },
  methods: {
    bubbleSort(arr) {
      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;
    },
  },
};
</script>

在上述代码中，定义了一个数组 `arr`，然后使用 `bubbleSort` 方法进行冒泡排序，并将排序后的结果展示在页面上。冒泡排序的核心代码在 `bubbleSort` 方法中，使用两个嵌套的循环，将相邻的两个元素进行比较，如果前一个元素大于后一个元素，则将它们交换位置。最终得到的结果是一个按从小到大排序的数组。