<!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. [Python]PyCharm在创建py文件时自动添加头部注释

    在Pycharm主界面找到 File ----->> Setting ----->> Editor ----->> File and Code Templates ...

  2. FirstJavaWeb

    (未完成)出错有点多,Tomcat的配置也出问题了,Tomcat突然找不到jdk了,好像是我之前下载过一回然后没卸干净有残留文件,还有连接数据库的代码也有问题.       <%@page im ...

  3. kali2019.4试用记录

    问题一:中文乱码 https://blog.csdn.net/dust_hk/article/details/103299136 参考以上博文即可解决: 1.设置locales. dpkg-recon ...

  4. 题解【洛谷P5767】[NOI1997]最优乘车

    题面 一道很经典的最短路模型转换问题. 考虑如何建图. 我们可以发现,对于每一条公交线路,可以将这条线路上 可以到达的两个点 连一条权值为 \(1\) 的边. 获取一条公交线路上的每一个点可以使用读取 ...

  5. ASP.NET Core 2.1 中的 HttpClientFactory (Part 4) 整合Polly实现瞬时故障处理

    原文:https://www.stevejgordon.co.uk/httpclientfactory-using-polly-for-transient-fault-handling发表于:2018 ...

  6. react-路由和Ant design

    路由的使用 react-router import React from 'react' // 如果要使用 路由模块,第一步,运行 yarn add react-router-dom // 第二步,导 ...

  7. webpack, autoprefixer

    可以通过postcss-loader 添加 const autoprefixer = require('autoprefixer'); ... { loader: 'postcss-loader', ...

  8. 51 nod1067 Bash游戏 V2（sg函数打表）

    1067 Bash游戏 V2 1.0 秒 131,072.0 KB 5 分 1级题   有一堆石子共有N个.A B两个人轮流拿,A先拿.每次只能拿1,3,4颗,拿到最后1颗石子的人获胜.假设A B都非 ...

  9. tensorflow expand_dims和squeeze

    有时我们会碰到升维或降维的需求,比如现在有一个图像样本,形状是 [height, width, channels],我们需要把它输入到已经训练好的模型中做分类,而模型定义的输入变量是一个batch,即 ...

  10. AcWing 1058. 股票买卖 V

    //初始状态(入口)转移到手中无货的第>=2天 //最终状态(出口)可能从手中无货的第一天转移过来,或者从手中无货的第>=2天 //f[i,0]表示走到第i天,且位于手中有货的状态 //f ...