JavaScript和Vue.js内容很多，需要多加学习，很多基础语法都没有掌握，费了一上午的劲才算搞定。记录下来并不断完善完整，以便后面参考。
在学习Vue.js中，最好是针对某个知识点进行实践，我想了一个以前在Windows程序开发中经常用到的一个场景，在一个表格里，单、双行显示不同的背景和前景色，鼠标移入和移出是另外一个背景色和前景色。更复杂一点的设置道理一样，也可以做成渐进色背景。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js->动态改变样式</title>
<script src="https:///npm/vue@2/dist/vue.js"></script>
<style>
.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;}
</style>
</head>
<body>
<div id="demo">
<h1 align="center">{{title}}</h1>
<table cellpadding="1" cellspacing="1" align="center" class="table" bgcolor="#cccccc">
<tr align="center" class="rowTitleColorSet">
<td>学号</td>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
<td>总分</td>
</tr>
<tr v-for="(item,i) in studentList" :key="i" v-bind:class="getClass(i)" align="center" @mouseenter="changeRowBg" @mouseleave="restoreRowBg" :id="'rowId'+i">
<td>{{item.Id}}</td>
<td>{{item.Name}}</td>
<td >{{item.ChineseScore}}</td>
<td >{{item.MathScore}}</td>
<td>{{item.ChineseScore + item.MathScore}}</td>
</tr>
</table>
</div>
<script>
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=;
document.getElementById().className="focusRowColorSet";
},
restoreRowBg(){
e=window.event||e;
var destObj = e.srcElement || e.target;
destObjId=;
var rowId=destObjId.substr(5,destObjId.length - 5);
if(rowId/2==parseInt(rowId/2)){
document.getElementById().className="evenRowColorSet";
} else {
document.getElementById().className="oddRowColorSet";
};
},
}
var vm=new Vue({
el:"#demo",
data:dataObj,
methods,
computed:{
}
})
</script>
</body>
</html>
效果图一（初始和鼠标移出状态）：
效果图二（鼠标移入状态）：
