最主要就是用到属性的绑定 :class （动态绑定多个class）
:class="[(k+1)%2==1?'trclock':'',curId==k?'trhover':'',selectedId==k?'trselected':'']"
(k+1)%2==1?'trclock':''当前行是奇数行则使用trclock样式；
curId==k?'trhover':'' 当curId==k时 trhover样式添加进当前TR，通过mouseentermouseleave 两个函数来控制curId的值；
selectedId==k?'trselected':'' 当selectedId==k时trselected 样式添加进当前TR，通过点击事件select(k)来设置selectedId的值；
<!DOCTYPE html><html><head><meta charset="GBK"><title></title><style>* {margin: 0px;padding: 0px;}body {margin: 20px;font-family: Arial, "宋体";font-size: 12px;line-height: 20px;color: #333333;}.table{font-size: 13px;word-break:break-all;cursor: default;BORDER: #FFFFFF 1px solid;background-color:#FFFFFF;border-collapse:collapse ;border-Color:#E2B801;}.tdprimary{padding: 2px;width: 100px;}.trclock{background-color: #ECF5FF;}.trhover{background-color: #C2C2C2;}.trselected{background-color: #62B0FF}</style></head><body><div id="app"><table border="1" cellspacing="1" cellpadding="4" bordercolorlight=#CCCCCC bordercolordark=#FFFFFF class="table" pcolor='#FFFFE5'><tr :class="[(k+1)%2==1?'trclock':'',curId==k?'trhover':'',selectedId==k?'trselected':'']"@mouseenter="enter(k)"@mouseleave="leave()"@click="select(k)"v-for="(item,k) in list" :key="k"><td class="tdprimary" v-for="(i,j) in item" :key="j">{{i}}</td></tr></table></div></body><script src="vue.js"></script><script>var vm = new Vue({el: '#app',data: {curId:null,selectedId:null,list:[[11,12,13,14,15],[21,22,23,24,25], [31,32,33,34,35], [41,42,43,44,45], [51,52,53,54,55],[61,62,63,64,65] ]},methods:{enter(id){this.curId = id;},leave(){this.curId =null;},select(id){this.selectedId=id;}}});</script></html>
