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 单选按钮 ...
随机推荐
- 后台程序编译过程报错PCC-F-02104, Unable to connect to Oracle
偶然重新编译了一下后台程序,发现编译过程报错无法连接数据库.但通过sqlplus登录数据库是正常的.后台程序改动中也做了详细的分析,没有改动相关数据库的参数和配置. 最后通过浏览器查看了很多相关问题的 ...
- 小马哥的 Java 项目实战营学习笔记（1）
小马哥的 Java 项目实战营 小马哥的 Java 项目实战营 第二节:数据存储之 JDBC JDBC 核心 API 数据源 接口 - javax.sql.DataSource获取方式 1.普通对象初 ...
- GPB重磅！浙大李兰娟院士团队修饰多组学研究揭示炎症反应新机制
炎症 (inflammation) 是机体对致炎因子的损伤所发生的一种以防御反应为主的基本病理过程.翻译后修饰(PTMs)在调节多种炎症信号通路中起着重要作用,如磷酸化(phosphorylation ...
- 【Python机器学习实战】感知机和支持向量机学习笔记（三）之SVM的实现
前面已经对感知机和SVM进行了简要的概述,本节是SVM算法的实现过程用于辅助理解SVM算法的具体内容,然后借助sklearn对SVM工具包进行实现. SVM算法的核心是SMO算法的实现,首先对SMO算 ...
- JavaScript学习03（函数）
函数 函数定义 JavaScript 函数是通过 function 关键词定义的. 声明定义 function functionName(parameters) { 要执行的代码 } 被声明的函数不会 ...
- Qt列表等控件实现平滑滚动&deepin启动器存在的问题
Qt列表等控件实现平滑滚动 Qt自带的的列表控件是不能平滑滚动的,但如果滚动速度快的话很容易引起视线丢失,体验效果很差.本篇主要讲述如何在Qt中对列表控件加入平滑滚动.文中以QScrollArea控件 ...
- Error running 'Tomcat 9.0.24': port out of range:-1
修改tomcat安装目录下的conf--server.xml检查一下,端口不能是-1, 一般会选80,或者1-65535之间的任意一个整数
- Elasticsearch BM25相关度算法超详细解释
Photo by Pixabay from Pexels 前言:日常在使用Elasticsearch的搜索业务中多少会出现几次 "为什么这个Doc分数要比那个要稍微低一点?".&q ...
- 06.SpringBoot核心技术
目录 一.配置文件 二.Web开发 静态资源访问 欢迎页支持 自定义 Favicon 普通参数和基本注解 1.1 @PathVariable 1.2 @RequestHeader 1.3 @Reque ...
- NOIP 模拟 $25\; \rm random$
题解 \(by\;zj\varphi\) 期望好题. 通过推规律可以发现每个逆序对的贡献都是 \(1\),那么在所有排列中有多少逆序对,贡献就是多少. \[\rm num_i=(i-1)!\sum_{ ...