<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>

    <script src="./node_modules/element-ui/lib/index.js"></script>

    <link rel="stylesheet" href="./node_modules/element-ui/lib/theme-chalk/index.css">

    <title></title>

    <style>

        .active {

            color: red;

            background-color: lightslategrey;

        }

        ul,

        li {

            padding: 0;

            margin: 0;

            list-style: none;

            line-height: 40px;

        }

    </style>

</head>

<body>

    <div id="app">

        <ul>

            <li v-for="(item,index) in movies" :class="{active:selectIndex==index}" @click="liClick(index)">

                {{item}}

            </li>

        </ul>

    </div>

    <script>

        const vm = new Vue({

            el: "#app",

            data() {

                return {

                    movies: ["决战中途岛", "误杀", "叶问4", "唐人街探案3", "终结者:黑暗命运"],

                    selectIndex: 0

                }

            },

            methods: {

                liClick(index) {

                    this.selectIndex = index

                }

            },

        })

    </script>

</body>

</html>

Vue CSS模拟菜单点击变色的更多相关文章

  1. CSS伪类选择器active模拟JavaScript点击事件

    一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...

  2. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  3. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  4. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  5. 简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  6. C++用PostMessage模拟按钮点击

    有时我们可能会在某个程序中用到模拟按钮点击事件. 本文中的例子在MFC程序中调试通过,duilib的没试过,还需探索 不多说,上代码: #include "stdafx.h" #i ...

  7. jQuery实现菜单点击隐藏（上下左右）

    canrun <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  8. Adobe Edge Animate –使用css制作菜单

    Adobe Edge Animate –使用css制作菜单 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 效果图:

  9. css3模拟jq点击事件

    还是这个梗,收好冷.今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照 jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮 ...

随机推荐

  1. 自学linux——5.网络设置

    网络设置 1.网卡配置文件位置:ls /etc/sysconfig/network-scripts/ 2.网卡配置文件命名:ifcfg-网卡名称 3.查看网卡配置文件:cat /etc/sysconf ...

  2. nfs配置项在/etc/exports中的说明

    rw 可读写的权限 ro 只读的权限no_root_squash 登入NFS主机,使用该共享目录时相当于该目录的拥有者,如果是root的话,那么对于这个共享的目录来说,他就具有root的权       ...

  3. python中map()和reduce()的使用

    map() 会根据提供的函数对指定序列做映射.map(function, iterable, ...)Python 3.x 返回迭代器.print(map()) 返回迭代器地址一般和list一起用 才 ...

  4. JUC学习笔记（一）

    1.什么是 JUC 1.1.JUC简介 在 Java 中,线程部分是一个重点,本篇文章说的 JUC 也是关于线程的.JUC 就是 java.util .concurrent 工具包的简称.这是一个处理 ...

  5. 安装CDH6.2 agent报错

    界面报错信息提示如下: file /opt/cloudera/parcels/.flood/CDH-6.2.0-1.cdh6.2.0.p0.967373-el7.parcel...does not e ...

  6. 并发编程——synchronized关键字的使用

    前言 我们一般对共享数据操作的时候,为了达到线程安全我们会使用synchronized关键字去修饰方法或者代码块.那么今天我们就来讲一讲synchronized关键字的使用. 专栏推荐: 并发编程专栏 ...

  7. 《Python Cookbook v3.0.0》Chapter2 字符串、文本

    感谢: https://github.com/yidao620c/python3-cookbook 如有侵权,请联系我整改. 本文章节会严格按照原书(以便和原书对照,章节标题可能会略有修改),内容会有 ...

  8. 【笔记】numpy.array基础（3）

    numpy数组的合并与分割 合并操作 concatenate拼接,只能操作维数一样的数据 且并不局限于两个元素 对于二维数组来说,可以通过控制axis来控制是按照行还是按照列来进行拼接操作,默认为ax ...

  9. DI 原理解析 并实现一个简易版 DI 容器

    本文基于自身理解进行输出,目的在于交流学习,如有不对,还望各位看官指出. DI DI-Dependency Injection,即"依赖注入":对象之间依赖关系由容器在运行期决定, ...

  10. SpringBoot监听redis过期key

    开启过期监听 vim /etc/redis.conf 取消notify-keyspace-events Elg的注释 pom.xml 添加: <dependency> <groupI ...