// 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>
Logo

前往低代码交流专区

更多推荐