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

　　

vue实现隔行换色，下拉菜单控制隔行换色的颜色的更多相关文章

  1. vue的jsonp百度下拉菜单

    通过vue的jsonp实现百度下拉菜单的请求,vue的版本是2.9.2 <!DOCTYPE html> <html lang="en"> <head& ...

  2. 形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）

    HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  3. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  4. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  5. Bootstrap_下拉菜单

    在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件. 一.普通下拉菜单 <div class="dropdown"&g ...

  6. Bootstrap系列 -- 34. 按钮下拉菜单

    按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单.按钮下拉菜单其实就是普 ...

  7. debian , ubuntu 截取下拉菜单

    普通情况下print键很好用的,但是,截下拉菜单的时候,就怎么按都没反应了...然后换了shutter也不行,只能在静态界面截图.所以...然后就有了下面方法. 如果不是gnome怎么办?这个担心显然 ...

  8. HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；

    1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...

  9. MDNavBarView下拉导航菜单（仿美团导航下拉菜单）

    说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...

随机推荐

  1. excel的count、countif、sunif、if

    一.count统计数值个数 格式:count(指定区域)  , 例如:count(B2:G5) 二.countif统计数值满足条件个数 格式:COUNTIF(条件区域,指定条件)  ,例如:count ...

  2. GitHook 工具 —— husky介绍及使用

    名称 githooks-Git使用的挂钩.(githook在官网的介绍) 描述 如同其他许多的版本控制系统一样,Git 也具有在特定事件发生之前或之后执行特定脚本代码功能(从概念上类比,就与监听事件. ...

  3. 12 : API

    Object 概念 所有类的顶级父类 存在于java.lang包中,这个包不需要我们手动导包 常用方法 toString() 默认返回   类名@地址  的格式,来展示对象的地址值,如:a00000. ...

  4. [转载]Ubuntu 使用Compiz配置炫酷3D桌面

    原文地址 个人引言: 这个Compiz使用与我的这篇Blog:打摆不顺利?是你没看这篇!相互有联系.这个Compiz是打摆工具之一,可以把打摆窗口调成透明,这样机房监控拍下来的屏幕会是打摆窗口下面的某 ...

  5. C#加密与解密(DES\RSA)学习笔记

    本笔记摘抄自:https://www.cnblogs.com/skylaugh/archive/2011/07/12/2103572.html,记录一下学习过程以备后续查用. 数据加密技术是网络中最基 ...

  6. 剑指offer-面试题15-二进制中1的个数-位运算

    /* 题目: 二进制中1的个数,例如9为1001,有2位1. */ /* 思路: 算法2: 左移unsigned类型flag=1,和n做&运算,当flag移动中1的位置与n对应位置也为1时,则 ...

  7. opencv图像加文字与运行时间

    //获取推断时间 vector<double>layterTimings; double freq = getTickFrequency() / 1000; //得到ms double t ...

  8. P3292 [SCOI2016]幸运数字 [线性基+倍增]

    线性基+倍增 // by Isaunoya #include <bits/stdc++.h> using namespace std; #define rep(i, x, y) for ( ...

  9. 无法解析的外部符号 _snprintf

    VS2010下: 在使用第三方静态库 遇到无法解析的外部符号 _snprintf . 编译第三方库的时候 看到有 warning C4013: 'snprintf' undefined; assumi ...

  10. Codeforces #454 div1 C party（状态压缩bfs）

    题意: 给你N个点的一幅图,初始图中有M条边,每次操作可以使得一个点连接的所有点变成一个团,问你最少多少次操作可以使得整个图变成一个团. 解法: 因为N很小 所以我们可以二进制压缩来表示一个点与其他点 ...