Vue实现v-for生成标签后默认展示第一个_vue中怎样使用v-for从数组的第一个展示

<template>
	<div>
		<ul>
			<li v-for="(item, index) in list1" @mouseenter="handleMouseEnter" :id="index"></li>
		</ul>
		<div>
			<div v-for="(item, index) in list2" v-show="isActive == index" >{{ item }}</div>
		</div>
	</div>
</template>
<script>
export default{
	data(){
		return {
			list1: [1, 2, 3, 4],
			list2: [1, 2, 3, 4],
			isActive: 0
		}
	},
	methods: {
		handleMouseEnter(e){
			this.isActive = e.target.id
		}
	}
}
</script>

需求：根据li便签切换下方div展示内容，默认显示为第一个li标签内容。
思路：li生成的时候添加id，利用mouseenter事件触发的时候，赋值给isActive，isActive初始值能确定默认显示内容。
由于mouseenter事件阻住捕获，所以e.target和e.currenttarget相同，没办法绑定事件到ul上，有点耗费性能。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

现在有个更好的方法，不用赋值index给id。

@mouseenter="handleMouseEnter($event,index)
把index作为参数传到方法里面执行赋值给isActive
1
2