在Vue开发中，我们经常会遇到需要在 @click 方法中设置默认选择第一个元素的需求。这种情况在列表展示、导航栏切换等场景中十分常见。接下来，我们就详细探讨一下实现这一功能的方法。

我们要明确项目的基本结构。假设我们有一个列表，每个列表项都绑定了 @click 事件。例如：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" @click="selectItem(item)">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['选项1', '选项2', '选项3'],
      selectedItem: null
    }
  },
  methods: {
    selectItem(item) {
      this.selectedItem = item;
    }
  }
}
</script>

在上述代码中，我们有一个包含多个选项的列表，点击每个列表项时会调用 selectItem 方法，并将当前点击的 item 赋值给 selectedItem。

现在，我们要实现默认选择第一个元素。一种简单的方法是在 created 钩子函数中手动调用 selectItem 方法。修改代码如下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" @click="selectItem(item)">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['选项1', '选项2', '选项3'],
      selectedItem: null
    }
  },
  methods: {
    selectItem(item) {
      this.selectedItem = item;
    }
  },
  created() {
    if (this.list.length > 0) {
      this.selectItem(this.list[0]);
    }
  }
}
</script>

在 created 钩子函数中，我们首先检查 list 是否有元素。如果有，就调用 selectItem 方法并传入第一个元素，这样就实现了默认选择第一个选项。

另外一种方式是在 data 中直接初始化 selectedItem 为第一个元素：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" @click="selectItem(item)">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['选项1', '选项2', '选项3'],
      selectedItem: '选项1'
    }
  },
  methods: {
    selectItem(item) {
      this.selectedItem = item;
    }
  }
}
</script>

这种方法更为直接，直接在数据初始化时就将第一个选项赋值给 selectedItem。

通过以上两种常见的方法，我们就能轻松地在Vue中通过 @click 方法设置默认选择第一个元素，满足各种业务场景的需求。