<!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. ContentObserver 内容观察者作用及特点

    eg: 1.定义Uri public static Uri KEY_BROWSER_URI = Uri.parse("content://com.android.browser.provid ...

  2. RHCE_DAY01

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

  3. 那些 22 岁毕业做Android开发的人，他们 50 岁左右时的人生轨迹是怎样的？

    本人今年35了,已经干了14年程序员,是14年不是13年,因为我是专科毕业. 一直就是普普通通的程序员,特别纯的码农,从没做过管理岗位,并且很可能以后也是如此. 现在已经上有老下有小. 曾经在某著名互 ...

  4. 计算机网络：基于iptalbes的SANT和DNAT|docker的服务器发布项目--超详细一看就会

     项目说明: 模拟企业让内网服务器可以上网,同时发布内网的服务器 1.实验环 我们需要准备三台linux系统,一台作为路由器机route,其它为客户机client-1.client-2 主机改名 ho ...

  5. Nmap 常用命令及抓包分析

    1.主机发现:主机发现也称为ping扫描,但是Nmap中主机发现的技术已经不是简单的采用ping工具发送简单的ICMP回声请求报文.用户完全可以通过使用列表扫描(-sL)或者通过关闭ping(-P0) ...

  6. DVWA（五）：CSRF 全等级跨站请求伪造

    CSRF,全称Cross-site request forgery,翻译过来就是跨站请求伪造,是指利用受害者尚未失效的身份认证信息(cookie.会话等),诱骗其点击恶意链接或者访问包含攻击代码的页面 ...

  7. IP笔记

    自动专用IP地址APIPA的范围是B类地址块169.254.0.0--169.254.255.255

  8. NOIP 模拟 7 回家

    题解 题目 第一眼,板子题,不就是一个缩点吗?后来一想不对,哪有这么傻的出题人呢,出个这水题. 一想,不对,不仅要求割点,还要判断这个割点是否在搜索树 \(n\) 的祖先上.想到这后,我哈哈大笑,还想 ...

  9. 编译ffmpeg（第一次），实现JPG转MP4

    ffpmeg网址:http://ffmpeg.org/ ffmpegapi文档:http://ffmpeg.org/doxygen/trunk/index.html 因为这是JPG转MP4,所以不涉及 ...

  10. Linux 系统下10个查看网络与监听的命令

    下面列出来的10个基础的每个linux用户都应该知道的网络和监控命令.网络和监控命令类似于这些: hostname, ping, ifconfig, iwconfig, netstat, nslook ...