用vue写个冒泡排序

好的，以下是Vue.js的冒泡排序代码：

<template>
  <div>
    <h1>冒泡排序</h1>
    <div>
      <label>请输入待排序的数组：</label>
      <input type="text" v-model="arrStr">
      <button @click="sort">排序</button>
    </div>
    <div v-if="sortedArr.length > 0">
      <p>排序前：{{ arr }}</p>
      <p>排序后：{{ sortedArr }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arrStr: '',
      arr: [],
      sortedArr: []
    }
  },
  methods: {
    sort() {
      // 将输入的字符串转换成数组
      this.arr = this.arrStr.split(',').map(item => parseInt(item));
      const n = this.arr.length;
      for (let i = 0; i < n; i++) {
        for (let j = 0; j < n - i - 1; j++) {
          if (this.arr[j] > this.arr[j+1]) {
            [this.arr[j], this.arr[j+1]] = [this.arr[j+1], this.arr[j]];
          }
        }
      }
      this.sortedArr = this.arr;
    }
  }
}
</script>

以上代码中，我们使用了Vue.js框架来实现冒泡排序。在模板中，我们使用了一个文本框和一个按钮，用于输入待排序的数组和触发排序操作。在数据中，我们定义了三个变量：`arrStr`表示输入的待排序数组字符串，`arr`表示待排序的数组，`sortedArr`表示排序后的数组。在`sort`方法中，我们首先将输入的字符串转换成数组，并使用双重循环实现冒泡排序，最后将排序后的数组赋值给`sortedArr`变量。你可以通过在页面中输入待排序的数组并点击“排序”按钮来进行排序。