Vue实现隔行变色_vue隔行换色

作者：IT小白 | 2024-03-15 14:37:07

踩

vue隔行换色

Vue实现隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>vue.js测试</title>
    <style>
        table{cursor: pointer;margin: 100px auto;}
        table{
          border-collapse: collapse;
        }
        table tr.hover{
          background-color: lightgreen;
        }
        
        .odd{
          background-color: lightblue;
        }
        .even{
          background-color: lightcyan;
        }
        
        .odd2{
          background-color: lightseagreen;
        }
        .even2{
          background-color: lightpink;
        }
        
        .odd3{
          background-color: #ccc;
        }
        .even3{
          background-color: lightcoral;
        }
        </style>
        </head>
<body>
    <div id="app">
        <select v-model="selectIndex">
            <option v-for="(item,index) in colors" :value="index">
                {{item}}
            </option>
        </select>
        <table border="1" @mouseleave="leaveTable">
            <tr 
                v-for="(trItem,trIndex) in tables"
                :class="[trIndex%2?colors[selectIndex][0]:colors[selectIndex][1],hoverIndex===trIndex?'hover':'']"
                @mouseenter="enterTr(trIndex)"
            >
                <td v-for="(tdItem,tdIndex) in trItem">
                    {{tdItem}}
                </td>
            </tr>
        </table>
    </div>


</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
// 现实table
//   - 隔行换色
//   - 鼠标移入行的颜色变化
//   - 有一个下拉列表，可以选择切换隔行的颜色

//创建实例
var Vm = new Vue({//配置项
    el:'#app',//挂载点
    data:{//实例的数据
        hoverIndex:-1,
        selectIndex:0,//默认选项的value
        tables:[
            ['第一行1','第一行2','第一行3','第一行4'],
            ['第二行1','第二行2','第二行3','第二行4'],
            ['第三行1','第三行2','第三行3','第四行4'],
            ['第五行1','第五行2','第五行3','第五行4']
        ],
        colors:[
            ['odd','even'],
            ['odd2','even2'],
            ['odd3','even3']
        ]
    },
    methods:{//方法，事件处理函数所在的地方
        enterTr(index){
            this.hoverIndex = index;
        },
        leaveTable(){
            this.hoverIndex = -1;
        }
    }    
}）        
</script>
</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/241817