<!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. 数据库MySQL之存储过程

    存储过程的定义 存储过程是一种在数据库中存储复杂程序,以便外部程序调用的一种数据库对象.其在思想上与面向对象编程中函数的定义与调用一致,存储过程只是SQL语言维度上的封装与运用. 存储过程的优缺点 优 ...

  2. spring的困惑--org.springframework.web.servlet.DispatcherServlet noHandlerFound

    出现这种情况可能是代码没有更新到Tomcat服务器上

  3. [JAVA] 面向对象小小总结

    面向对象概述 符合人类思维习惯的编程思想 , 生活中存在着不同形态的事物 , 这些事物存在着不同的联系 , 在程序中使用对象来映射现实中事物 , 使用对象关系来描述事物之间的联系, 这种思想就是面向对 ...

  4. 【spring】spring源码阅读之xml读取、bean注入（BeanFactory）

    前言 此源码其实是在4月中旬就看了,而且当初也写了一份word文档,但不打算直接把word发上来.还是跟着以前的笔记.跟踪代码边看边写吧. 其实当初看源码的理由很简单,1.才进新公司,比较有空闲.2. ...

  5. Yarn报错：Exception message: /bin/bash: line 0: fg: no job control

    Exception message: /bin/bash: line 0: fg: no job control 这个错误是 本地idea跨平台远程调试hadoop集群出现的,在使用windows调用 ...

  6. 下载thinkphp5.0

    在服务器文件中右击Git_Bash_Here打开 在命令框写入 首先克隆下载应用项目仓库   git clone https://github.com/top-think/think tp5 tp5代 ...

  7. lasso-ridge

    线性回归 线性回归很简单,用线性函数拟合数据,用 mean square error (mse) 计算损失(cost),然后用梯度下降法找到一组使 mse 最小的权重. lasso 回归和岭回归(ri ...

  8. TP框架中生成带背景带文字的二维码

    首先下载一个phpqrcode的包放到/vendor目录下 链接:https://pan.baidu.com/s/18jV9DypYB_PHDhD6C0iedQ 提取码:qxuo 如果只是单纯生成二维 ...

  9. LED Candle Light Factory-LED Candle Light: Full Of Romance

    LED candle lights are beautiful and can add elegance and romance to any space. These candles make th ...

  10. python3练习100题——004

    继续做题-经过python3的测试 原题链接:http://www.runoob.com/python/python-exercise-example4.html 题目:输入某年某月某日,判断这一天是 ...