vue實現隔行換色，下拉菜單控制隔行換色的顏色

時間 2020-02-22

標籤 vue 實現隔行下拉菜單控制顏色简体版

原文原文鏈接

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

1. 隔行換色
2. 實現隔行換色
3. JS實現隔行換色
4. jQuery實現隔行換色
5. jQuery實現表格隔行換顏色：
6. cxGrid 隔行換色
7. js隔行換色
8. 表格的隔行換色
9. js之隔行換色
10. 潤乾隔行換色
更多相關文章...
• ionic 顏色 - ionic 教程
• PHP imagecolorclosest - 取得與指定的顏色最接近的顏色的索引值 - PHP參考手冊
• Docker容器實戰(六) - 容器的隔離與限制
• ☆基於Java Instrument的Agent實現

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。