Vue经典实例之table表格奇偶行不同颜色、鼠标移入变色、点击变色，一看就明白

太过爱你忘了你带给我的痛 2021-07-24 13:22 1324阅读 0赞

### 最主要就是用到属性的绑定 :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，通过mouseenter mouseleave 两个函数来控制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>