vue项目 v-for循环数据,鼠标移入移出改变颜色
// 1.data中声明变量// 2.通过对应下标给class类名// 3.鼠标移入把当前index赋值给data中声明的变量<template><divv-for="(item,index) in orgSource" :key="item.code" >@click="lookorgDetail(item,index)"@mouseover="dowmloadover(
·
// 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>
更多推荐
已为社区贡献4条内容
所有评论(0)