<!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. kubernetes/k8s CRI分析-kubelet创建pod分析

    先来简单回顾上一篇博客<kubernetes/k8s CRI 分析-容器运行时接口分析>的内容. 上篇博文先对 CRI 做了介绍,然后对 kubelet CRI 相关源码包括 kubele ...

  2. JUC学习笔记（五）

    JUC学习笔记(一)https://www.cnblogs.com/lm66/p/15118407.html JUC学习笔记(二)https://www.cnblogs.com/lm66/p/1511 ...

  3. Java方法02——定义与调用

    方法的定义与调用 定义与调用 例子  package method; ​ public class Demon03 {     public static void main(String[] arg ...

  4. 跟我一起写 Makefile（七）

    使用变量 ---- 在Makefile中的定义的变量,就像是C/C++语言中的宏一样,他代表了一个文本字串,在Makefile中执行的时候其会自动原模原样地展开在所使用的地方.其与C/C++所不同的是 ...

  5. git只提交部分修改的文件（提交指定文件）

    在我们的项目中,经常会在本地编译一些代码,还未写完,测试那边来告诉你要改改某个文件的bug,非常着急,此时改完了,提交的时候,自己还在编译的代码并不想提交,此时,你可以利用git这些指令帮助你! 1/ ...

  6. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  7. LDAP未授权访问学习

    LDAP未授权访问学习 一.LDAP 介绍 LDAP的全称为Lightweight Directory Access Protocol(轻量级目录访问协议), 基于X.500标准, 支持 TCP/IP ...

  8. ARM的九种寻址方式

    文章目录 1.立即数寻址 2.寄存器寻址 3.寄存器间接寻址 4.寄存器偏移寻址 5.寄存器基址变址寻址 6.批量寄存器寻址 7.相对寻址 8.堆栈寻址 9.块拷贝寻址 寻址方式就是CPU根据指令中的 ...

  9. Django 模版语法 测试环境 ORM单表查询

    模版语法 传值 视图函数向前端html页面传值,基本上所有的数据类型都可以渲染在前端页面上. views.py from django.shortcuts import render, redirec ...

  10. kubebuilder实战之三：基础知识速览

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...