博客

<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上，有点耗费性能。

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

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