Vue实现隔行变色

最新推荐文章于 2024-04-29 17:14:49 发布

湳橙

最新推荐文章于 2024-04-29 17:14:49 发布

阅读量796

点赞数

分类专栏：案例文章标签： vue vue.js

本文链接：https://blog.csdn.net/chenlaodacsdn/article/details/108351273

版权

案例专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>

湳橙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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: collaps
复制链接

扫一扫

专栏目录