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 单选按钮 ...
随机推荐
- JMeter（1）-介绍+环境+安装+使用
一.开发接口测试案例的整体方案: 分析出测试需求,并拿到开发提供的接口说明文档: 从接口说明文档中整理出接口测试案例(包括详细的入参和出参数据以及明确的格式和检查点). 和开发一起对评审接口测试案例 ...
- C++ 继承方式 与 普通方式 对比
1 //C++ 继承 2 //继承是面向对象三大特性之一 3 4 #include <iostream> 5 #include <string> 6 using namespa ...
- 干了快3年Android了，感觉自己的职业生涯已经快凉了
背景 首先我是个菜鸡,工资也低的一笔. 刚毕业时候在一家国企上班干 app 开发,干了快两年的时候,跳槽到了一家伪大厂干安全.投了不少简历都没有回音,只有这加伪大厂要我就来了.当时说好了会接触一些底层 ...
- 做了两年多的安卓，突然想转Java后端，感觉Android职业前景不太好，转还是不转？
近几年相信很多Android开发者都有过这种想法,最终还是有些Android 开发选择了转行,但是还有些开发者选择了坚持. 因为现在Android开发确实竞争很大,很多公司抛出几个岗位,每天能收到成百 ...
- 我把阿里、腾讯、字节跳动、美团等Android性能优化实战整合成了一个PDF文档
安卓开发大军浩浩荡荡,经过近十年的发展,Android技术优化日异月新,如今Android 11.0 已经发布,Android系统性能也已经非常流畅,可以在体验上完全媲美iOS. 但是,到了各大厂商手 ...
- 史上最详细的Android消息机制源码解析
本人只是Android菜鸡一个,写技术文章只是为了总结自己最近学习到的知识,从来不敢为人师,如果里面有不正确的地方请大家尽情指出,谢谢! 606页Android最新面试题含答案,有兴趣可以点击获取. ...
- 谈谈网络协议 - 数据链路层（ Data Link）
数据链路层( Data Link) 链路:从1个节点到相邻节点的一段物理线路(有线或无线),中间没有其他交换节点 案例 上图可以看出,总共由5条链路组成: 第1条:计算机0 => 路由器0,使用 ...
- VIM正则表达式的懒惰模式
例如有如下一段话: Another whale sighting occurred on , <2004>. AK and HI 要匹配每一个<...>,如果用<.> ...
- 一台服务器上部署多个Terracotta的方法
在window server 2003 下,利用apache2.2.11+tomcat6+terracotta 群集不能复制session(http://forums.terracotta.org/f ...
- vim编辑文件时[O]pen Read-Only, (E)dit anyway, (R)ecover, (D)elete it, (Q)uit, (A)bort:
出现这个问题是因为你上次编辑的时候在没有保存的情况下退出了(如:电脑关机等)也有可能是有其他人在和你同时进行编辑行为(不同会话中).这是因为在用vim编辑的时候,vim会在打开文件目录下 ...