Vue CSS模拟菜单点击变色
<!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模拟菜单点击变色的更多相关文章
- CSS伪类选择器active模拟JavaScript点击事件
一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...
- jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- css三级菜单效果
一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- 简单的css js控制table隔行变色
(1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...
- C++用PostMessage模拟按钮点击
有时我们可能会在某个程序中用到模拟按钮点击事件. 本文中的例子在MFC程序中调试通过,duilib的没试过,还需探索 不多说,上代码: #include "stdafx.h" #i ...
- jQuery实现菜单点击隐藏（上下左右）
canrun <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- Adobe Edge Animate –使用css制作菜单
Adobe Edge Animate –使用css制作菜单 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 效果图:
- css3模拟jq点击事件
还是这个梗,收好冷.今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照 jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮 ...
随机推荐
- 升级到Spring 5.3.x之后，GC次数急剧增加，我TM人傻了
最近我们项目升级到了 Spring Boot 2.4.6 + Spring Cloud 2020.0.x,通过我的另一系列即可看出:Spring Cloud 升级之路.但是升级后,我们发现 Young ...
- Windows协议 LDAP篇 - 组&OU
LDAP搜索 LDAP查找 位操作 以userAccountControl为例,CN=User-Account-Control,CN=Schema,CN=Configuration,DC=muxue, ...
- 利用system generator 生成vivado ip—以低通滤波器举例
前段时间自学了matlab和vivado联合推出的system generator工具,用来做数字信号处理,十分好用且使开发更便捷,下面举个例子来供大家一起学习下. 首先打开matlab命令行,输入s ...
- React脚手架配置代理
react脚手架配置代理 方法一 在package.json中追加如下配置 "proxy":"http://localhost:5000" 说明: 优点:配置简 ...
- Java 横向技术 Spring框架【笔记】
Java横向技术 spring框架[笔记] Spring 的两大特性是什么? AOP(Aspect Oriented Programming,面向切面编程)与 IOC(Inverse of Contr ...
- Spring的@PropertySource注解使用
@PropertySource注解是Spring用于加载配置文件,默认支持.properties与.xml两种配置文件.@PropertySource属性如下: name:默认为空,不指定Spring ...
- 007 GMII、SGMII和SerDes的区别和联系
一.GMII和SGMII的区别和联系 GMII和SGMII区别,上一篇已经介绍了,这一篇重点介绍SGMII和SerDes区别. GMII和SGMII GMII 在MII接口基础上提升了数据位宽和Clo ...
- Spring源码解析之ConfigurationClassPostProcessor（二）
上一个章节,笔者向大家介绍了spring是如何来过滤配置类的,下面我们来看看在过滤出配置类后,spring是如何来解析配置类的.首先过滤出来的配置类会存放在configCandidates列表, 在代 ...
- STM32—重定向printf和getchar函数到串口
在STM32测试串口的时候经常需要在开发板和上位机之间传输数据,我们可以用c语言中的printf()函数和getchar()函数来简化传输. 以printf()为例: printf()函数实际上是一个 ...
- Linux下MySQL主从复制(Binlog)的部署过程
什么是 MySQL 的主从复制 Mysql内建的复制功能是构建大型高性能应用程序的基础, 将Mysql数据分布到多个系统上,这种分布机制是通过将Mysql某一台主机数据复制到其它主机(slaves)上 ...