vue实现隔行换色,下拉菜单控制隔行换色的颜色
2024-10-01 07:00:10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<style> table,tr,td{
border:1px solid red;
}
.green{
background:green;
}
.red{
background: red;
}
.blue{
background: blue;
}
.pink{
background: pink;
}
.yellow{
background: yellow;
}
.purple{
background: purple;
}
</style>
<body>
<!--
1.创建一个表格
2.表格隔行变色
3.鼠标滑过有特效
4.下拉菜单控制隔行变色的颜色
-->
<div id="app">
<!-- 下拉菜单 -->
<select name="" id="" @change='change'>
<option value="" v-for="(item,index) in colors" :value='index'>{{item}}</option>
</select>
<!-- 表格 -->
<table>
<tr v-for = '(trItem,trIndex) in tables' :class='trIndex%2==0?colors[colorSel][0]:colors[colorSel][1]' >
<!-- <tr v-for='(item,index) in tables'> -->
<!-- {{trIndex}} -->
<!-- 通过判断移入事件后表格中的数字的数值与标记的tdSel是否相等,相等则显示透明 -->
<td v-for='(tdItem,tdIndex) in trItem' :style="{opacity:tdSel==tdItem?0.3:1}" @mouseover="move(tdItem)">
{{tdItem}}
</td>
<!-- {{trItem}}{{trIndex}} -->
<!-- <td>{{item}}{{index}}</td> --> </tr>
</table>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
tables:[[11,12,13],[21,22,23],[31,32,33]],
// tables:[11,12,13],
tdSel:11,//数字11初始为透明
colors:[['red','green'],['blue','pink'],['yellow','purple']],//颜色
colorSel:0//控制隔行变色的下标
},
methods:{
move(item){
this.tdSel = item; },
change(e){
console.log(e.target.value);//获取下拉框标签的下标
this.colorSel = e.target.value;
}
}
})
</script>
</body>
</html>
最新文章
- 免费图片存储和图话【提供demo下载】
- Python 2.7 - CentOS 7 - ImportError: No module named Tkinter
- angular学习之关于ng-class详解
- Python 基礎 - 淺copy補充說明
- react4 props 解析
- 基础 HTML之目录问题(相对路径和绝对路径区别)
- Look and say numbers
- Effective Java实作Comparator - 就是爱Java
- add BOM to fix UTF-8 in Excel
- cf #214div2
- 在表单(input)中id和name的区别
- Ubuntu安装apache+Yii2
- mysql 两例习题
- 《视觉SLAM十四讲课后作业》第一讲
- spring从服务器磁盘读取图片,然后显示于前端页面上
- AWK入门
- TCP/IP 笔记 - Internet协议
- [Q&;A] 解决 SBT 初始化或下载 jar 包速度慢的问题
- 驱动文件中只有cat/inf/dll文件,怎么安装
- tomcat ---->; 源码关联/编译/....