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 ...
随机推荐
- ant buid.xml 模板
<?xml version="1.0" encoding="UTF-8"?> <project name="ant" de ...
- Docker数据持久化及实战(Nginx+Spring Boot项目+MySQL)
Docker数据持久化: Volume: (1)创建mysql数据库的container docker run -d --name mysql01 -e MYSQL_ROOT_PASSWORD= my ...
- ArcGIS Server导出shp文件
需求: 在项目中客户提出需要在Web端能够定义条件将后台的数据导出shp文件,并下载. 实现: 基于ArcGIS开发导出矢量数据的服务,用户输入导出数据类型.过滤条件.导出范围等条件,服务能够快速将相 ...
- OneinStack定时同步备份数据库/网站至七牛云存储方法
无论我们用WEB面板,还是用一键脚本安装环境建站,只要一旦我们开始用VPS.服务器,最为关键的就是服务器中的数据.因为大部分VPS.服务器商家都是无管理型主机,任何的安装和维护都需要我们自行管理.即便 ...
- vue图片不存在时加载默认图片
在文件中的img那里添加:οnerrοr="errorImg01",然后设置errorImg01的路径如果直接写成 errorImg01: ('../../assets/image ...
- Apache 的 http-default.conf 详解
##Apache 默认设置文件 Timeout 300 #设置服务器在断定请求失败前等待的秒数.默认值 300 KeepAlive Off #设置是否启用 HTTP 持久链接,On ...
- netlink, PF_NETLINK - 内核与用户之间的通讯
SYNOPSIS 总揽 #include <asm/types.h> #include <sys/socket.h> #include <linux/netlink.h& ...
- 2019长安大学ACM校赛网络同步赛 B Trial of Devil (递归)
链接:https://ac.nowcoder.com/acm/contest/897/B来源:牛客网 Trial of Devil 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32 ...
- 1121. Damn Single (25)
"Damn Single (单身狗)" is the Chinese nickname for someone who is being single. You are suppo ...
- Linux读写物理内存
一.基础知识 1.打开设备文件: mem是一个字符设备文件,是计算机主存的一个映像.通常只有root用户对其有读写权限.因此只有root用户能进行这些操作. 如果要打开设备文件/dev/mem,需要系 ...