vue表格滑过时行列高亮

接上文，我看很多朋友用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写法