<!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>
