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 单选按钮 ...
随机推荐
- Java 使用 Apache commons-math3 线性拟合、非线性拟合实例（带效果图）
Java 使用 CommonsMath3 的线性和非线性拟合实例,带效果图 例子查看 GitHub Gitee 运行src/main/java/org/wfw/chart/Main.java 即可查看 ...
- 有赞Android实习五面都挂了，复习半月再战，转拿腾讯offer！
缘起 为了有赞的面试准备了半个月的样子,当时还投了美团.字节.滴滴.京东,目的只有一个,就是要进大厂,但是只有有赞扛过了一面,其他都是一面就挂了. 前三面都自我感觉良好,以为能稳拿offer的,没想到 ...
- 如何将代码优雅的插入到word中
介:写博客或者word时需要插入代码,但如何更优雅的将代码插入到word中呢? 反面教材如下: 技巧步骤1:插入表格,设置表格无边框: 技巧步骤2:使用Notepad++的高级功能: 大部分代码编辑器 ...
- 一个遵循CleanArchitecture原则的Asp.net core轻量级开源项目
这是一个基于最新的ASP.net core 5.0创建Razor Page应用程序解决方案模板.遵循Clean Architecture的原则,以最求简洁的代码风格和实现快速开发小型的web业务系统的 ...
- putty编译过程
在Win7上用Visual Studio编译putty源代码. 安装vs2005,只安装c++和.net framework sdk即可: 将putty-src.zip解压到e:\MyDoc\VSPr ...
- 安鸾CTF Writeup PHP代码审计01
PHP代码审计 01 题目URL:http://www.whalwl.xyz:8017 提示:源代码有泄露 既然提示有源代码泄露,我们就先扫描一遍. 精选CTF专用字典: https://github ...
- ELK太重？试试KFC日志采集
写在前面 ELK三剑客(ElasticSearch,Logstash,Kibana)基本上可以满足日志采集.信息处理.统计分析.可视化报表等一些日志分析的工作,但是对我们来说--太重了,并且技术栈不是 ...
- Dubbo系列讲解之服务注册【3万字长文分享】 23/100 发布文章
服务注册的几个步骤 对于RPC框架的服务注册,一般包含了如下的流程: 加载服务提供者,可能是通过xml配置的,也可能是通过扫描注解的 实例化服务提供者,并以服务接口作为key,实现类作为value ...
- 微信小程序 简易搜索功能实现
先看效果图 挺简单的一个实现方法,导入外部js数据,将数据通过radio-group展示出来,根据数据里的status属性判断显不显示该项. 在搜索框内实时读取输入的数据,去除空格后将数据跟js里的n ...
- 你知道那些JVM性能调优
设定堆内存大小 -Xms :堆初始空间大小 -Xmx : 堆内存最大限制. 设置新生代大小.新生代不宜太小,否则会有大量对象涌入老年代 -XX:NewSize : 新生代大小 -XX:NewRatio ...