vue中@click方法如何设置默认选择第一个

Vue 中 @click 方法默认选择第一个

在 Vue 中，可以使用 @click 方法为元素添加点击事件响应。但是，如果你希望在点击一个父元素时，默认选择其第一个子元素，可以使用以下步骤：

1. 先祖元素上使用 v-for

将 v-for 指令添加到父元素上，循环渲染子元素。例如：

立即学习“前端免费学习笔记（深入）”；

<div v-for="item in items">  ...</div>

2. 创建选择方法

定义一个 selectItem 方法，用于处理子元素的点击事件。该方法需要接受要选择的子元素作为参数。

methods: {  selectItem(item) {    this.selectedItem = item;  },},

3. 使用 v-model 绑定

使用 v-model 指令将子元素的选中状态绑定到 selectedItem 数据属性。例如：

<input type="radio" v-model="selectedItem" :value="item">

4. 初始化选中状态

在组件的 created 生命周期钩子中，初始化 selectedItem 数据属性为第一个子元素。

created() {  this.selectedItem = this.items[0];},

5. 完成

现在，当点击父元素时，会触发 @click 事件并调用 selectItem 方法。该方法将第一个子元素的选中状态设置为 true，从而默认选择第一个子元素。