v-for循数组，div中显示对象中的某个值，比如item.name，此div为横向排列的，点击item.name时获取此元素距离页面左侧的距离

您可以使用Vue.js的v-for指令来循环数组，并使用v-bind指令绑定元素的样式和属性，使用@click指令绑定元素的点击事件，并使用ref属性来获取元素的引用，使用offsetLeft属性来获取元素距离页面左侧的距离。

首先，在HTML中添加一个用于循环数组的div元素：

<div id="app">
  <div v-for="(item, index) in items" :key="index" class="item" :style="{ left: index * 100 + 'px' }" @click="handleItemClick(item)">
    {{ item.name }}
  </div>
</div>

然后，在JavaScript中创建Vue实例，并定义items数组和handleItemClick方法：

var app = new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' },
      { id: 4, name: 'Item 4' },
      { id: 5, name: 'Item 5' }
    ]
  },
  methods: {
    handleItemClick: function(item) {
      var element = this.$refs[item.id][0];
      var offsetLeft = element.offsetLeft;
      console.log("距离页面左侧的距离：" + offsetLeft + "px");
    }
  }
});

在上面的代码中，通过定义items数组来循环展示每个元素，并使用handleItemClick方法来处理元素点击事件。在handleItemClick方法中，使用this.$refs[item.id][0]来获取元素的引用，使用offsetLeft属性来获取元素距离页面左侧的距离。

最后，在CSS中设置item元素的样式：

.item {
  position: absolute;
  top: 0;
  width: 100px;
  height: 50px;
  background-color: #ccc;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

这样，每次点击item.name时，就可以获取该元素距离页面左侧的距离。