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 ...
随机推荐
- 关于Java多线程的一些面试问题
1.ArrayList和Vecoter区别? Array和ArrayList的异同点一.Array和ArrayList的区别#1. Array类型的变量在声明的同时必须进行实例化(至少得初始化数组的大 ...
- Vue 2.0 入门系列(15)学习 Vue.js 需要掌握的 es6 (2)
类与模块 类 es6 之前,通常使用构造函数来创建对象 // 构造函数 User function User(username, email) { this.username = username; ...
- adb 配置连接
一. adb环境安装 1.1. windown 驱动安装 1. 下载驱动(ADB Kits):http://adbshell.com/downloads 2. adb 测试 <1>. 解压 ...
- git学习指南
近来学习Git,苦寻资料下发现廖雪峰老师的教程很好,在此推荐传送门 附每节总结,方便查阅 创建版本库 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 使用命令git ...
- 小白学Python——Matplotlib 学习(3) 函数图形
import matplotlib.pyplot as plt import numpy as np x = np.linspace(-1,1,50) y = 2*x + 1 plt.figure() ...
- 思维体操: HDU1008 Elevator
Elevator Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
- Node+Express+MySql实现简单增删改查和登录
var express = require('express'); var mysql = require('mysql'); var app = express(); var bodyParser ...
- Django、Flask、Tornado的区别?
Django:Python 界最全能的 web 开发框架,battery-include 各种功能完备,可维护性和开发速度一级棒.常有人说 Django 慢,其实主要慢在 Django ORM 与数据 ...
- JUNIT4 GroboUtils多线程测试
阅读更多 利用JUNIT4,GroboUtils进行多线程测试 多线程编程和测试一直是比较难搞的事情,特别是多线程测试.只用充分的测试,才可以发现多线程编码的潜在BUG.下面就介绍一下我自己在测试多线 ...
- 吴恩达深度学习:2.1Logistic Regression逻辑回归及其损失函数
1.Logistic Regression是一个二元分类问题 (1)已知输入的特征向量x可能是一张图,你希望把它识别出来,这是不是猫图,你需要一个算法,可以给出预测值,更正式的y是一个概率,当输入特征 ...