vue实现动态计算宽度

在Vue中实现动态计算宽度可以使用 `ref` 来获取到对应元素的DOM对象，然后通过 `offsetWidth` 属性来获取元素的实际宽度，最后将宽度动态绑定到元素的 `style` 属性中即可。

例如，假设有一个动态生成的菜单列表，每个菜单项的宽度不一定相同，我们可以在模板中为每个菜单项添加一个 `ref` 属性，然后在 `mounted` 钩子函数中通过 `this.$refs` 获取到每个菜单项的DOM对象，计算它们的实际宽度并保存到一个数组中，最后将这个数组绑定到菜单列表的 `style` 属性中，实现动态计算宽度。

具体代码如下：

<template>
  <div class="menu" :style="{width: menuWidth + 'px'}">
    <div v-for="(item, index) in menuList"
         :key="index"
         :ref="'menuItem' + index"
         class="menu-item">{{ item }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: ['Home', 'Products', 'About', 'Contact'],
      menuItemWidths: []
    }
  },
  computed: {
    menuWidth() {
      return this.menuItemWidths.reduce((total, width) => total + width, 0)
    }
  },
  mounted() {
    this.menuItemWidths = this.menuList.map((item, index) => {
      return this.$refs['menuItem' + index][0].offsetWidth
    })
  }
}
</script>

在上面的代码中，我们通过 `map` 函数遍历菜单列表，获取到每个菜单项的DOM对象，然后通过 `offsetWidth` 属性获取它们的实际宽度，最后将宽度保存到 `menuItemWidths` 数组中。然后在 `menuWidth` 计算属性中，我们使用 `reduce` 函数将所有菜单项的宽度相加得到菜单的总宽度，最后将这个宽度绑定到菜单列表的 `style` 属性中。