Vue.js(3)：动态改变表格中的行样式

　　JavaScript和Vue.js内容很多，需要多加学习，很多基础语法不加以手工代码练习是不好掌握的，今天费了一上午的劲才算搞定一个小练习。记录下来并不断完善完整，以便后面参考。

　　在学习Vue.js中，最好是针对某个知识点进行实践，在学习中我想了一个以前在Windows程序开发中经常用到的一个场景，在一个表格里，单、双行显示不同的背景和前景色，鼠标移入和移出是另外一个背景色和前景色。

　　更复杂一点的设置道理一样，比如做成渐进色背景或者更炫的前端样式等。

　　代码：

    
    
    
    Vue.js->动态改变样式
    
    
        .table tr{
	        line-height:200%;
        }        
        .table td{
            width: 100px;
        }        
        .rowTitleColorSet{background-color: #818080;color: rgb(232, 232, 232);}
        .evenRowColorSet{background-color: #efefef;color: rgb(8, 8, 8);}
        .oddRowColorSet{background-color: #f8f8f8;color: rgb(128, 128, 128);}
        .focusRowColorSet{background-color: #999;color:#d70008;}
    


    

        {{title}}
        
            
                学号
                姓名
                语文
                数学
                总分
            
            
                {{item.Id}}
                {{item.Name}}
                {{item.ChineseScore}}
                {{item.MathScore}}
                {{item.ChineseScore + item.MathScore}}
            
                
    
    
        var dataObj={
            title:"学生成绩表",
            studentList:[
                    {Id:101,Name:'小明',ChineseScore:81.5,MathScore:87},
                    {Id:102,Name:'小黄',ChineseScore:61,MathScore:47.5},
                    {Id:103,Name:'小丽',ChineseScore:89.5,MathScore:83},
                    {Id:104,Name:'小宋',ChineseScore:56,MathScore:97},
                    {Id:105,Name:'小王',ChineseScore:82,MathScore:73},
                    {Id:106,Name:'小李',ChineseScore:31,MathScore:63},
                    {Id:107,Name:'小华',ChineseScore:49,MathScore:83},
                ]
        }
        var methods={
            getClass(i){
                    if(i/2==parseInt(i/2)){ return 'evenRowColorSet'; } else { return 'oddRowColorSet'; };
                },
            changeRowBg(){
                e=window.event||e;
                var destObj = e.srcElement ||  e.target;
                destObjId=destObj.id;
                document.getElementById(destObj.id).className="focusRowColorSet";
            },
            restoreRowBg(){
                e=window.event||e;
                var destObj = e.srcElement ||  e.target;
                destObjId=destObj.id;
                var rowId=destObjId.substr(5,destObjId.length - 5);
                if(rowId/2==parseInt(rowId/2)){ 
                    document.getElementById(destObj.id).className="evenRowColorSet";
                } else { 
                    document.getElementById(destObj.id).className="oddRowColorSet";
                };
            },            
        }
        var vm=new Vue({
            el:"#demo",
            data:dataObj,
            methods,
            computed:{
            }
        })
    

　　效果图一（初始和鼠标移出状态）：

 　　效果图二（鼠标移入状态）：