<!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. PHP0010：PHP操作mysql

    cmd中清除之前的记录 cmd操作数据库的步骤: php 到 mysql的并发数 15个左右 for循环是要知道起点和终点 foreach是从结果集中取数据 而while可遍历自然结果集

  2. spring boot的一个小项目小型进销存系统

    项目所需的依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g ...

  3. C#排序算法的实现---冒泡排序

    一.算法原理 冒泡排序算法的运作如下: 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 针对 ...

  4. 如何将博客搬至CSDN

    简单聊下对于博客园的印象是技术改变世界,作为一个IT技术人员很乐意把这里当作自己的网上家园,每天在这里分享着精彩的原创内容,看重的不是华丽的外表.诱人的虚名,而是纯净.专注.对技术人员的理解. CSD ...

  5. Android布局样式

    本篇介绍一下Android中的几种常用的布局,主要介绍内容有: ·View视图 ·LinearLayout ·RelativeLayout 在介绍布局之前,我们首先要了解视图View的基本属性,因为所 ...

  6. MVC开发之Razor的使用

    一.运用布局和视图起始文件 布局的使用,可以简化视图,允许用户创建能够运用于多个视图的通用HTML,并使得维护更加容易.下面是一个简单的例子: 域模型类: public class Product { ...

  7. Django中非视图函数获取用户对象

    今天遇到了一个问题:在Django中怎么从非视图函数中获取用户对象?怎么保证不同的请求获取到不同的用户对象? 平常我们获取用户对象使用的是: request.user 不得不说,这确实很方便. 但是, ...

  8. [SDOI2010]粟粟的书架 [主席树]

    [SDOI2010]粟粟的书架 考虑暴力怎么做 显然是提取出来 (x2-x1+1)*(y2-y1+1) 个数字拿出来 然后从大到小排序 然后就可以按次取数了- 然而接下来看数据范围 \(50\%\ r ...

  9. POJ-3984-迷宫问题（bfs+记录路径）

    定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, ...

  10. Java并发，synchronized锁住的内容

    synchronized用在方法上锁住的是什么? 锁住的是当前对象的当前方法,会使得其他线程访问该对象的synchronized方法或者代码块阻塞,但并不会阻塞非synchronized方法. 脏读 ...