用vue写一个冒泡排序

<template>
<div>
<h2>冒泡排序</h2>
<div class="input-group">
<label for="inputArray">输入数组：</label>
<input type="text" id="inputArray" v-model="inputArray" placeholder="请用逗号分隔每个数">
</div>
<button @click="sort">排序</button>
<div v-if="sorted" class="output-group">
<label for="outputArray">输出数组：</label>
<input type="text" id="outputArray" :value="outputArray.join(', ')">
</div>
</div>
</template>

<script>
export default {
data() {
return {
inputArray: '',
outputArray: [],
sorted: false
}
},
methods: {
sort() {
// 将输入的字符串转成数字数组
const arr = this.inputArray.split(',').map(Number)
const len = arr.length
let temp

// 冒泡排序
for (let i = 0; i < len - 1; i++) {
for (let j = 0; j < len - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
temp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = temp
}
}
}

this.outputArray = arr
this.sorted = true
}
}
}
</script>