Vue 中获取多个元素宽度（渲染完成之后）

<template>
  <div ref='elements'>
    <div class='element'></div>
    <div class='element'></div>
    <div class='element'></div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.$nextTick(() => {
      const elements = this.$refs.elements.querySelectorAll('.element');
      elements.forEach((element) => {
        const width = element.offsetWidth;
        console.log('Element width: ' + width + 'px');
      });
    });
  },
};
</script>
<p>在上面的示例中，我们首先在模板中用<code>ref</code>属性标识出包含多个元素的父元素。然后在<code>mounted()</code>钩子函数中使用<code>$nextTick()</code>方法确保DOM已经渲染完成。接着使用<code>querySelectorAll()</code>方法获取所有<code>.element</code>元素，再在循环遍历中计算它们的宽度并输出到控制台。</p>