Vue点击切换Class变化,实现Active当前样式
刚自学Vue不久,所以还不太熟,所以直接上代码。
一、先在data里增加一个变量,用来储存当前点击的元素
data() {
    return {
      activeClass: -1, // 0为默认选择第一个,-1为不选择
    };
  },
二、在Template里面的代码,切记在@click方法里面要传index,
<li :class="activeClass == index ? 'active':''" v-for="(itme,index) in itmeList" :key="index" @click="getItme(index)">
{{itme.text}}
</li>
三、点击事件:改变data里面activeClass的值
    getItme(index) {
      this.activeClass = index;  // 把当前点击元素的index,赋值给activeClass
    },
四、在style中写上 .active 样式
.active {
  /* background: #eee; */
  color: #1e82d2;
  font-weight: bolder;
}
Vue点击切换Class变化,实现Active当前样式的更多相关文章
- vue点击切换颜色限制个数(用了mui框架)
		
vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...
 - vue点击切换样式,点击切换地址栏,点击显示或者隐藏
		
1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...
 - Vue点击切换class
		
<style> .active{ color: red; } </style> <ul id="app"> <li v-for='(ite ...
 - vue 点击切换图标
		
<div @click="showImg" class="showSearch"> <img class="header_img&q ...
 - Vue实现active点击切换
		
Vue实现active点击切换 循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click=“active(index)” 2.将索引值传入class(索引等于几就第几个添加ac ...
 - vue实现选项卡切换--不用ui库
		
vue的ui库中基本都有选项卡切换的组件,但是在项目开发过程中却不一定能很好的为我们所用,因为里面的样式和 一些状态并不能很好的根据我们的项目需求进行定制.最近项目中使用的是vant-ui中的标签页, ...
 - vue实现菜单切换
		
vue实现菜单切换,点击菜单导航切换不同的内容以及为当前点击的选项添加样式,或者组件. method里: css: html代码: <nav> <ul> <li> ...
 - vue实现tab切换
		
需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感 <!DOCTYPE html> <html lang="en"> <h ...
 - jq demo 轮播图,图片可调用,向左,自动+鼠标点击切换
		
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
 
随机推荐
- php php-fpm、nginx和js
			
1 php-fpm是什么 php-fpm是php fastCGI process manager的缩写.它是php的进程管理器,对每个请求的处理都是一个进程. php-fpm管理了一个进程池,假如进程 ...
 - notepad++通过调用cmd运行java程序
			
notepad++运行java程序方法主要有下面两个: 通过插件NppExec运行(自行百度“notepad++运行java”) 通过运行 调用cmd编译执行java程序(下面详细讲解) 点击上面工具 ...
 - Kubernetes组件及网络基础
			
在前面的部分了解了Pod的创建删除 ,查看信息等.那么我们怎么去管理Pod呢?我们可以通过 ReplicationController 去管理维护 Pod. Replication Controlle ...
 - JavaDoc注释
			
标签 说明 JDK 1.1 doclet 标准doclet 标签类型 @author 作者 作者标识 √ √ 包. 类.接口 @version 版本号 版本号 √ √ 包. 类.接口 @param 参 ...
 - 初次尝试python爬虫,爬取小说网站的小说。
			
本次是小阿鹏,第一次通过python爬虫去爬一个小说网站的小说. 下面直接上菜. 1.首先我需要导入相应的包,这里我采用了第三方模块的架包,requests.requests是python实现的简单易 ...
 - Python 实用脚本
			
Python 实用脚本 脚本写的好,下班下得早!程序员的日常工作除了编写程序代码,还不可避免地需要处理相关的测试和验证工作. 例如,访问某个网站一直不通,需要确定此地址是否可访问,服务器返回什么,进而 ...
 - 在cmd下用cd怎么进不了其他的盘
			
你当前就是在C盘目录下的,可以切换到别的盘比如D:,然后在切换E:!然后可以切换C:,然后可以用cd\回到根目录. cd是打开文件根目录里面文件夹的,比如C:目录下可以cd Windows打开Wind ...
 - MFC- socket 编程
			
一.CAsyncSocket类 CAsyncSocket属于异步非阻塞类. CAsyncSocket类采用了windows socket中的WSAAsyncSelect模型.CAsyncSocket ...
 - SpringMVC_放行静态资源
			
静态资源到处都是坑!明白原理才能绕过这些坑! web.xml配置servlet中四种路径的区别 在web.xml文件的配置中,四种路径编写方式优先级如下图: 其中b和d都能接收所有请求,仅仅是在优先级 ...
 - Python 实现类似sed命令的字符串替换小程序
			
环境 PyCharm, Windows 背景 sed命令 sed 's/原字符串/新字符串' 单引号中间是s表示替换,原字符串就是要被替换掉的字符串,新字符串就是想要的字符串. 效果 在命令行输入py ...