vue项目 v-for循环数据,鼠标移入移出改变颜色

2022年6月5日13:58:48
// 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><pclass="org_title">{{ item.title}}</p></div></template><script>exportdefault{data(){
			isAcitive:false},
		methods:{// 鼠标点击事件 给变量赋值当前indexlookorgDetail(item,index){this.isAcitive= index},// 鼠标移入赋值indexdowmloadover(index){this.isAcitive= index},// 鼠标移出downloadleave(index){this.isAcitive=false},}}</script><style>.isAcitive{
        cursor: pointer;// 鼠标小手
        color:#f5222d;// 红色}</style>
  • 作者:cc是怼怼
  • 原文链接:https://blog.csdn.net/ccyolo/article/details/122250604
    更新时间:2022年6月5日13:58:48 ,共 728 字。