用vue写一个冒泡排序

好的，下面是用 Vue.js 实现冒泡排序的代码：

<template>
  <div>
    <h2>冒泡排序</h2>
    <div class="input-container">
      <label>输入数组：</label>
      <input v-model="inputArray" />
      <button @click="sortArray">排序</button>
    </div>
    <div class="result-container">
      <p>排序结果：</p>
      <div v-for="(item, index) in sortedArray" :key="index">{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputArray: "",
      sortedArray: [],
    };
  },
  methods: {
    sortArray() {
      const arr = this.inputArray.split(",").map((item) => Number(item)); // 将输入的字符串转为数字数组
      const len = arr.length;
      for (let i = 0; i < len - 1; i++) {
        for (let j = 0; j < len - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; // ES6 解构赋值交换元素位置
          }
        }
      }
      this.sortedArray = arr;
    },
  },
};
</script>

这个组件包含一个输入框和一个按钮，可以输入需要排序的数组，点击按钮后会将输入的字符串转为数字数组并进行冒泡排序，最后将排序结果显示在页面上。