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 ...
随机推荐
- HashMap源码分析-jdk1.7
注:转载请注明出处!!!!!!!这里咱们看的是JDK1.7版本的HashMap 学习HashMap前先知道熟悉运算符合 *左移 << :就是该数对应二进制码整体左移,左边超出的部分舍弃,右 ...
- XLS导出的服务器端配置方式
IIS支持excel导出: 1.开始—运行,然后键入DCOMCNFG; 2.组件服务—计算机—我的电脑—DCOM配置,这时弹出一个问注册的窗口,确定注册. 这时如果一切恢复正常了,不用往下操作了. 关 ...
- MySQL插入emoji表情报错 SQLException: Incorrect string value 的两种解决方案
摘抄自:https://blog.csdn.net/dmw412724/article/details/81119325 原因:mysql的UTF-8只支持三个字节的存储,而一般字符是三个字节,但是e ...
- HNUSTOJ-1565 Vampire Numbers(暴力打表)
1565: Vampire Numbers 时间限制: 3 Sec 内存限制: 128 MB提交: 20 解决: 9[提交][状态][讨论版] 题目描述 The number 1827 is an ...
- TMS320F28335——IO控制/定时计操作
一.实现GPIO控制 1.硬件连接 从电路原理图上看来,LED灯是接在GPIO34 上的. 2.IO设置 2.1设置功能 GPXMUX1/2:功能选择寄存器 GPXMUX1/2 每组 IO 一般 ...
- css发展过程
https://www.cnblogs.com/dashnowords/p/9460722.html
- SQLSERVER还原数据库失败:错误: 3154
在SQL Server 2008版本中还原从sql server 2005备份出来的数据库时,提示错误:“备份集中的数据库备份与现有的 '***' 数据库不同.RESTORE DATABASE 正在异 ...
- Python 操作sqlite数据库及保存查询numpy类型数据(二)
# -*- coding: utf-8 -*- ''' Created on 2019年3月6日 @author: Administrator ''' import sqlite3 import nu ...
- OC中数组排序的3种方法
总结OC中数组排序3种方法:sortedArrayUsingSelector:;sortedArrayUsingComparator:;sortedArrayUsingDescriptors: 大体上 ...
- Mongo --01 介绍、安装、优化报警
目录 一 . NoSQL 介绍 二.MongoDB简介 三.MongoDB特点 四. mongo应用场景 五. 安装配置mongodb 六.优化报警 一 . NoSQL 介绍 NoSQL,指的是非关系 ...