Vue-Projekt v-Für Zyklusdaten bewegt sich die Maus hinein und heraus, um die Farbe zu ändern

// 1.data中声明变量
// 2.通过对应下标给class类名
// 3.鼠标移入把当前index赋值给data中声明的变量
<template>
     <div
       v-for="(item,index) in orgSource" :key="item.code" >
       @click="lookorgDetail(item,index)"
       @mouseover="dowmloadover(index)" // 鼠标移入
       @mouseleave="downloadleave(index)" // 鼠标移出
       // 判断变量是否等于当前下标，是的话类名为isActive 字体为红色
       :class=" isAcitive === index? 'isAcitive' : ''" >
       <p>{
    
    {
    
     moment(item.startTime).format('YYYY-MM-DD HH:mm') }}</p>
       <p class="org_title" >{
    
    {
    
     item.title }}</p>
     </div>
</template>
<script>
	export default {
    
    
		data(){
    
    
			isAcitive: false
		},
		methods:{
    
    
			// 鼠标点击事件 给变量赋值当前index
			lookorgDetail(item,index){
    
    
				this.isAcitive = index
			},
			// 鼠标移入赋值index 
			dowmloadover (index) {
    
    
		        this.isAcitive = index
		    },
		    // 鼠标移出 
		    downloadleave (index) {
    
    
	           this.isAcitive = false
	       },
		}
	}
</script>
<style>
	.isAcitive{
    
    
        cursor: pointer; // 鼠标小手
        color:#f5222d; // 红色
      }
</style>