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 ...
随机推荐
- [BZOJ 3123] [SDOI 2013]森林(可持久化线段树+并查集+启发式合并)
[BZOJ 3123] [SDOI 2013]森林(可持久化线段树+启发式合并) 题面 给出一个n个节点m条边的森林,每个节点都有一个权值.有两种操作: Q x y k查询点x到点y路径上所有的权值中 ...
- getchar返回int类型
#include <stdio.h> /* copy input to output; 2nd version */main(){int c;c = getchar();while(c ! ...
- 堆”,"栈","堆栈","队列"以及它们的区别
如果你学过数据结构,就一定会遇到“堆”,"栈","堆栈","队列",而最关键的是这些到底是什么意思?最关键的是即使你去面试,这些都还会问到, ...
- 哈希hash
定义 是把任意长度的输入(又叫做预映射pre-image)通过散列算法变换成固定长度的输出,该输出就是散列值 生成方法 hash() 哈希特性 不可逆 :在具备编码功能的同时,哈希算法也作为一种加密算 ...
- python 如何解决高并发下的库存问题??
python 提供了2种方法解决该问题的问题:1,悲观锁:2,乐观锁 悲观锁:在查询商品储存的时候加锁 select_for_update() 在发生事务的commit或者是事务的rollback时 ...
- html5酷炫效果链接收集
HTML5 3D图片相册图片轮播动画 http://www.html5tricks.com/demo/html5-3d-gallery-animation/index.html 36种漂亮的CSS ...
- IDEA--错误:找不到或无法加载XXXXX--解决方法--创建javafx或其他项目出现的问题
今天一上午超厂长在学习javafx的时候,总是创建一个然后运行就会出现 出现错误:找不到或无法加载主类 找了二个小时,都说是jdk或者其他环境配置问题 按照那些改了也没用重新创建一个也提示出现错误:找 ...
- Composer学习
Composer简介 Composer是PHP的一个依赖管理工具,不是包管理器:在项目中声明所依赖的外部工具库(libraries),Composer会自动安装止血工具库及依赖的库文件. 安装方式 C ...
- js工厂函数创建对象与对象构造函数的理解
工厂函数,顾名思义,就是通过一个"工厂的加工" 来创建一个对象的函数 //工厂函数 function createPerson(name,sex){ sex = sex == '男' ? '女' : ...
- Apache 的 http-default.conf 详解
##Apache 默认设置文件 Timeout 300 #设置服务器在断定请求失败前等待的秒数.默认值 300 KeepAlive Off #设置是否启用 HTTP 持久链接,On ...