<!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. 单片机学习（二）开发板LED灯的控制

    目录 开发板上LED灯相关的电路图 点灯 LED闪烁 LED流水灯 其他效果 灯光二进制计数器 进阶版流水灯 开发板上LED灯相关的电路图 这是P2相关7个引脚的电路图,在默认情况下它是直接接着VCC ...

  2. git 提代码时的相关命令，Mark一下

    以前用命令提代码都是复制粘贴,现在换了工作后,特别是回退代码的命令又忘了,去网上查了好久,心累.特此Mark一下 1. 打patch: 1.1 git diff >> ljh.patch ...

  3. CreatFile打开驱动失败

    使用  CreateFile(DRIVER_PATH, GENERIC_READ | GENERIC_WRITE, FILE_SHARE_READ, 0, OPEN_EXISTING, FILE_AT ...

  4. 在Mac上安装Istio并使用，有丰富的监控Kiali、Grafana、Jaeger

    我最新最全的文章都在南瓜慢说 www.pkslow.com,文章更新也只在官网,欢迎大家来喝茶~~ 1 简介 之前在文章<服务网格Istio入门-详细记录Kubernetes安装Istio并使用 ...

  5. Mysql数据库基础知识(全)

    前言:本博文为个人笔记,记录了Mysql的一些基本操作,一般掌握本博文就可以了解数据库.表.数据项的增删改查,希望对大家的学习有所帮助. 首先下载PHPSTUDY,将Mysql配置为系统变量. 具体操 ...

  6. postman之断言

    1 (状态码断言)和(返回内容断言)

  7. Python -类型提示 Type Hints

    为什么会有类型提示 Python是一种动态类型语言,这意味着我们在编写代码的时候更为自由,运行时不需要指定变量类型 但是与此同时 IDE 无法像静态类型语言那样分析代码,及时给我们相应的提示,比如字符 ...

  8. ceph介绍和安装

    目录 1.Ceph简介 2.Ceph的特点 3.Ceph的缺点 4.架构与组件 4.1.组件介绍 4.2.存储过程 5.部署 5.1 设置主机名.配置时间同步 5.2 配置添加清华源 5.3 初始化c ...

  9. How to name a slf4j logger

    Use logger in a non-static context: Logger logger = LoggerFactory.getLogger(this.getClass().getName( ...

  10. 如何删除windows10右键新建中不需要的选项

    参考博客https://blog.csdn.net/Kinglen_R/article/details/102983259 首先打开注册表程序,可以点击开始按钮后直接输入regedit点击进入 (或者 ...