vue-uniapp冒泡排序，逻辑Java，c++等都通用。

<template>
  <!-- 显示排序结果样式 -->
  <view class="content">
    <view class="text-area">
      <text class="title" style="margin-top: 200%; font-size: 44rpx; color: #DD524D;">{{show}}</text>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        //数组
        show: [9, 5, 8, 9, 3, 8, 4, 2, 5, 6, 1, 7]//12
      }
    },
    onLoad() {
      //加载时启动冒泡排序方法
      this.bubbleSorting(this.show)
    },
    methods: {
      //冒泡排序方法
      bubbleSorting(data) {
        var a = data;//获取到的数组，赋值给了a，
        //声明一个变量j，从0开始计数；  j小于a.length,j小于a-1数组的长度；  j加一
        for (var j = 0; j < a.length - 1; j++) {
          //声明一个变量i，从0开始计数； i小于a.length,j小于a-1数组的长度；i加一
          for (var i = 0; i < a.length - 1; i++) {
            //判断a的第i个值是否大于等于a的第i+1个值
            if (a[i] <= a[i + 1]) {
              // console.log("上一个比一个小，不交换")
            } else {
              debugger
              //当上一个比下一个大的
              //声明一个number变量被a的第i个值赋值，
              var number = a[i]
              //a的第i个值被a的i+1个值给赋值，
              a[i] = a[i + 1]
              //a的第i+1个的值被number给赋值，
              a[i + 1] = number
            }
          }
        }
        this.show = a;
      }
    }
  }
</script>
<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }
  .text-area {
    display: flex;
    justify-content: center;
  }
  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>