<!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. mac电脑怎么投屏？教你选择适合自己的Mac投屏软件

    mac上有什么好的投屏软件嘛?苹果手机ios投屏到mac用哪款投屏软件,mac投屏ipad该用哪款软件怎么操作,macdown小编给大家介绍的这几款Mac投屏软件,各有各的特色,总有一款适合你投屏. ...

  2. 移动端display:flex

    移动端display:flex布局时候,子元素有背景颜色时候,背景颜色不能铺满,有缝隙, // less .t-flex { background: blue; display: flex; > ...

  3. 简单实现KNN（处理连续型数据）

    import numpy as np import matplotlib.pyplot as plt import time import math import collections raw_da ...

  4. Codeforces Round #617 (Div. 3) 补题记录

    1296A - Array with Odd Sum 题意:可以改变数组中的一个数的值成另外一个数组中的数,问能不能使数组的和是个奇数 思路:签到,如果本来数组的和就是个奇数,那就OK 如果不是,就需 ...

  5. Docker学习参考网站

    Docker——从入门到实践 https://www.yuque.com/grasilife/docker 2.阿里源网站:https://cr.console.aliyun.com 3.DaoClo ...

  6. Cloud开发动态列的简单账表

    业务场景:客户需要根据过滤条件的不同显示不同的列.如下方式可以实现动态的列名. using System;using System.Collections.Generic;using System.L ...

  7. laravel框架用使用session 和cookie

    1.介绍 cookie 位于用户的计算机上,用来维护用户计算机中的信息,直到用户删除.比如我们在网页上登录某个软件时输入用户名及密码时如果保存为cookie,则每次我们访问的时候就不需要登录网站了.我 ...

  8. C# LINQ学习笔记二：LINQ标准查询操作概述

    本笔记摘抄自:https://www.cnblogs.com/liqingwen/p/5801249.html,记录一下学习过程以备后续查用. “标准查询运算符”是组成语言集成查询 (LINQ) 模式 ...

  9. 移动端 h5

    取消点击时候的透明区域 -webkit-tap-highlight-color: rgba(0,0,0,0); iphonex 适配 <meta name="viewport" ...

  10. AcWing 1058. 股票买卖 V

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