Vue.js 获取左侧元素距离：无 refs、id 或 class 的方法

<template>
  <div>
    <div ref='item1'>Item 1</div>
    <div ref='item2'>Item 2</div>
    <div ref='item3'>Item 3</div>
  </div>
</template>
<script>
export default {
  mounted() {
    const item1Left = this.$refs.item1.$el.getBoundingClientRect().left;
    const item2Left = this.$refs.item2.$el.getBoundingClientRect().left;
    const item3Left = this.$refs.item3.$el.getBoundingClientRect().left;
    const distance = item2Left - item1Left;

    console.log('The distance between item1 and item2 is: ' + distance + 'px');
  },
};
</script>
<p>在这个例子中，我们使用 $refs 获取了三个元素，然后通过 $el 获取了它们的 DOM 元素。使用 getBoundingClientRect() 方法可以获取元素的位置信息，包括 left、top、width、height 等属性。最后计算出了 item1 和 item2 之间的距离。</p>