<!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. ES11中的bigint

    上一周小编因为自己的事情,没有持续更新,还望大家谅解,趁着今天醒得早,小编继续和大家学(si)习(ke)es11中的新语法.在js中,对整数类型的数据,存在着最大极限,这个极限就是 const max ...

  2. Adaptive AUTOSAR 学习笔记 12 - 通信管理

    本系列学习笔记基于 AUTOSAR Adaptive Platform 官方文档 R20-11 版本 AUTOSAR_EXP_PlatformDesign.pdf 缩写 CM:Communicatio ...

  3. Python中strip()、lstrip()、rstrip()函数的用法

    Python中使用函数strip().lstrip().rstrip()来剔除字符串前后的特定字符 函数语法为:str.strip(chars) 返回值是一个新的字符串,不更改源字符串 其中,参数ch ...

  4. Wireshark过滤器详解

    Wireshark过滤器详解 1.Wireshark主要提供两种主要的过滤器 捕获过滤器:当进行数据包捕获时,只有那些满足给定的包含/排除表达式的数据包会被捕获 显示过滤器:该过滤器根据指定的表达式用 ...

  5. BUUCTF-[网鼎杯 2018]Fakebook(SSRF+联合注入绕Waf)

    记一道SSRF配合SQL注入的题. 喜欢在做题之前扫一下网站的目录,扫到了robots.txt文件可以访问,拿到user.php.bak的源码.同时还有flag.php. <?php class ...

  6. RHCE_DAY01

    shell概述 shell是一个程序,它连接了用户和Linux内核,它可以解释用户输入的命令传递给内核,让用户可以更加方便的使用Linux系统 shell 本身并不是内核的一部分,它只是站在内核的基础 ...

  7. Git常见的操作及命令

    Git的下载安装 安装直接去Git官方网站https://git-scm.com/下载后安装即可. Git常用命令 git init初始化本地仓库(没有仓库就创建) git clone克隆远程仓库到本 ...

  8. 时间转换 BASIC-14

    时间转换 给定一个以秒为单位的时间t,要求用"::"的格式来表示这个时间.表示时间,表示分钟,而表示秒,它们都是整数且没有前导的"0".例如,若t=0,则应输出 ...

  9. 痞子衡嵌入式：i.MXRT中不支持DQS的FlexSPI引脚组连接Flash下载与启动注意事项

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是i.MXRT中不支持DQS的FlexSPI引脚组连接Flash下载与启动注意事项. 最近痞子衡在支持一个印度客户,这个客户项目主芯片选择 ...

  10. JVM 基础面试题总结

    hey guys, 各位小伙伴们大家好,这里是程序员cxuan,欢迎你收看我新一期的文章,这篇文章我花了几天时间给你汇总了一波 JVM 的基础知识和面试题,内容还不是很全,我还在连载中,这篇文章相当于 ...