vue写冒泡排序

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

<template>
  <div>
    <h2>冒泡排序</h2>
    <div>
      <label>请输入待排序的数字，以空格分隔：</label>
      <input v-model="input" type="text">
      <button @click="sort">排序</button>
    </div>
    <div>
      <label>排序结果：</label>
      {{ output }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      output: ''
    }
  },
  methods: {
    sort() {
      let arr = this.input.split(' ').map(num => parseInt(num));
      for (let i = 0; i < arr.length - 1; i++) {
        for (let j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            let temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
          }
        }
      }
      this.output = arr.join(' ');
    }
  }
}
</script>

实现思路：

1. 在 Vue 的 `data` 选项中定义两个变量 `input` 和 `output`，分别表示输入和输出的内容。

2. 在模板中使用 `v-model` 指令将输入框与 `input` 变量绑定，使得用户输入的内容可以被 Vue 实例获取到。

3. 在模板中使用 `@click` 指令监听排序按钮的点击事件，并调用 `sort` 方法进行排序。

4. 在 `sort` 方法中，先将用户输入的字符串转换为数组，然后使用双重循环实现冒泡排序。

5. 最后将排序后的数组转换为字符串，并将结果赋值给 `output` 变量，以便在模板中显示。