接上文,我看很多朋友用vue时不好写,简单的说一下,还是先看效果图
上代码
template的
<template>
<div>
<table>
<tr v-for="(item,index) in 5">
<td v-for="(items,indexs) in 5" @mouseover="huadong(index,indexs)" @mouseout="likai(index,indexs)"> {{index}}</td>
</tr>
</table>
<hr>
</div>
</template>
script代码
<script>
export default {
data() {
return {
}
},
methods:{
huadong(i,k){
var tr = document.getElementsByTagName("tr");
for(let x=0;x<=i;x++){
for(let y=0;y<=k;y++){
tr[x].children[y].classList.add('hover')
}
}
},
likai(i,k){
var tr = document.getElementsByTagName("tr");
for(let x=0;x<=i;x++){
for(let y=0;y<=k;y++){
tr[x].children[y].classList.remove('hover')
}
}
},
}
}
</script>
css
<style>
table,tr,td{
border: 1px solid #000;
text-align: center;
}
td{
width:50px;height:50px;
}
.hover {
background: red;
color: aliceblue;
}
</style>
思路:通过事件获取当前滑动的行列坐标,然后直接添加class名即可,当然,也可以改成:class写法