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 单选按钮 ...
随机推荐
- LeetCode入门指南 之 排序
912. 排序数组 给你一个整数数组 nums,请你将该数组升序排列. 归并排序 public class Sort { //归并排序 public static int[] MergeSort(in ...
- RSA算法之学习
一.RSA算法 RSA是非对称加密算法中的代表,它的重要性不言而喻,为了弄清楚RSA算法,我们一起来完成一项任务: 背景:现在是疫情时代,假如小明和女朋友被迫在两个城市,小明为了表达感情,想发给对方一 ...
- 字节跳动Android面试凉凉，挥泪整理面筋，你不看看吗？
想在金九银十找工作的现在可以开始准备了,这边给大家分享一下面试会遇到的问题. 找工作还是需要大家不要担心,由于我们干这一行的接触人本来就不多,难免看到面试官会紧张,主要是因为怕面试官问的答不上来,答不 ...
- MapReduce框架原理-Writable序列化
序列化和反序列化 序列化就是把内存中的对象,转换成字节序列(或其他数据传输协议)以便于存储(持久化)和网络传输. 反序列化就是将收到字节序列(或其他数据传输协议)或者是硬盘的持久化数据,转换成内存中的 ...
- 超详细 Java 15 新功能介绍
点赞再看,动力无限.微信搜「程序猿阿朗 」,认认真真写文章. 本文 Github.com/niumoo/JavaNotes 和 未读代码博客 已经收录,有很多知识点和系列文章. Java 15 在 2 ...
- Build a Beautiful oh-my-zsh Themes
Selection Criteria double line; provide username, hostname, current directory; provide information o ...
- 日志导致jvm内存溢出相关问题
生产环境日志级别为info,请看如下这行代码: LOGGER.debug("the DTO info: {}", JSON.toJSONString(DTO)); 这段代码主要有两 ...
- docker 安装prometheus和grafna
一.拉取镜像 docker pull prom/prometheus 二.配置 sudo mkdir /etc/prometheus/ sudo vim /etc/prometheus/prometh ...
- DVWA靶场之File Upload（文件上传）通关
Low: <?php if( isset( $_POST[ 'Upload' ] ) ) { // Where are we going to be writing to? $target_pa ...
- Pikachu-CSRF模块
一.概述 Cross-site request forgery 简称为"CSRF",在CSRF的攻击场景中攻击者会伪造一个请求(这个请求一般是一个链接),然后欺骗目标用户进行点击, ...