uniapp中怎么用循环判断宽度并改变宽度

<template>  <view class="container">    <view class="item"          v-for="(item, index) in itemList"          :key="index"          :style="'width: ' + itemWidth[index] + 'px;'">      {{ item }}    </view>  </view></template><script>export default {  data() {    return {      itemList: ['Apple', 'Banana', 'Cherry', 'Grape', 'Orange'],      containerWidth: 100, // 容器宽度      itemWidth: [], // 子元素宽度      minItemWidth: 30 // 子元素最小宽度    }  },  mounted() {    this.calculateWidth()  },  methods: {    calculateWidth() {      const totalWidth = this.itemList.reduce((pre, cur) => {        return pre + this.calculateTextWidth(cur)      }, 0)      if (totalWidth < this.containerWidth) {        // 宽度不足，均分        const width = Math.floor(this.containerWidth / this.itemList.length)        this.itemWidth = this.itemList.map(() => width)      } else {        // 宽度过多，按比例缩小        let availableWidth = this.containerWidth        const result = this.itemList.reduce((pre, cur) => {          const curWidth = this.calculateTextWidth(cur)          const minCurWidth = Math.min(curWidth, this.minItemWidth)          const ratio = curWidth / minCurWidth          pre.push({            originalWidth: curWidth,            availableWidth: Math.floor(availableWidth / ratio),            ratio: ratio          })          availableWidth -= Math.floor(availableWidth / ratio)          return pre        }, [])        this.itemWidth = result.map(item => {          return Math.max(item.availableWidth / item.ratio, this.minItemWidth)        })      }    },    calculateTextWidth(text) {      // 通过uni.createSelectorQuery获取元素实际宽度      return uni.createSelectorQuery().select('.text-measure')        .boundingClientRect(rect => {          return rect.width        }).exec()    }  }}</script><style>.container {  display: flex;  flex-wrap: wrap;}.item {  display: flex;  justify-content: center;  align-items: center;  padding: 5px;}.text-measure {  visibility: hidden;  position: absolute;  left: -9999px;}</style>