刚自学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当前样式的更多相关文章

  1. vue点击切换颜色限制个数(用了mui框架)

    vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...

  2. vue点击切换样式,点击切换地址栏,点击显示或者隐藏

    1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...

  3. Vue点击切换class

    <style> .active{ color: red; } </style> <ul id="app"> <li v-for='(ite ...

  4. vue 点击切换图标

    <div @click="showImg" class="showSearch"> <img class="header_img&q ...

  5. Vue实现active点击切换

    Vue实现active点击切换 循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click=“active(index)” 2.将索引值传入class(索引等于几就第几个添加ac ...

  6. vue实现选项卡切换--不用ui库

    vue的ui库中基本都有选项卡切换的组件,但是在项目开发过程中却不一定能很好的为我们所用,因为里面的样式和 一些状态并不能很好的根据我们的项目需求进行定制.最近项目中使用的是vant-ui中的标签页, ...

  7. vue实现菜单切换

    vue实现菜单切换,点击菜单导航切换不同的内容以及为当前点击的选项添加样式,或者组件. method里: css: html代码: <nav> <ul> <li> ...

  8. vue实现tab切换

    需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感 <!DOCTYPE html> <html lang="en"> <h ...

  9. jq demo 轮播图,图片可调用,向左,自动+鼠标点击切换

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. 解决MySql忘记密码

    描述:忘记了mysql的登录密码,无法登录的情况下该怎么办? 环境:CentOS 7,数据库:mysql 5.7 1.停止数据库(先查看mysql服务是否运行) # ps -ef | -i grep ...

  2. Zend_Cache的使用

    一.Zend_Cache快速浏览 Zend_Cache 提供了一个缓存任何数据的一般方法. 在Zend Framework中缓存由前端操作,同时通过后端适配器(File, Sqlite, Memcac ...

  3. hihocoder 1636 : Pangu and Stones(区间dp)

    Pangu and Stones 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 In Chinese mythology, Pangu is the first livi ...

  4. Excel批量插入的SQL Server

    首先新建一个WPF的项目,名为ExcelToServerDemo 到Nuget去安装NPOI的Nuget包,点击安装即可,会自动引用项目. 新建一个Student的表格,有名字,年龄,性别,地址,以及 ...

  5. [七月挑选]Tomcat使用命令行启动之指定jdk版本

    title: Tomcat使用命令行启动之指定jdk版本 准备好环境,jdk和tomcat. 主要步骤 1.找到Tomcat/bin/catalina.bat文件. 2.在文件前端添加如下. set ...

  6. Mybatis驼峰式命名

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC ...

  7. 配置阿里云SLB全站HTTPS集群(以下内容仅为流程,信息可能有些对应不上)

    1)登录阿里云购买两台实例 1.1) 按量付费购买两台实例 1.2) 配置网络可以不选择分配外网 1.3) 自定义密码 1.4) 购买完成 1.5) 实例列表 2)购买SLB实例 2.1)按量付费购买 ...

  8. CentOS7 编译安装python3.6.8(升级python)

    1.安装依赖包和需要用到的工具 yum -y install wget openssl openssl-devel 这里如果不升级openssl,安装后pip安装模块可能会出错.点我查看pip安装模块 ...

  9. Linux之目录与路径

    特殊的目录: “.”,代表此层目录 “..”,代表上一层目录 “-”,代表前一个工作目录 “~”,代表“目前用户身份”所在的主文件夹 “~account”,代表account这个用户的主文件夹(acc ...

  10. python json、pickle

    文章部分转自:https://www.cnblogs.com/lincappu/p/8296078.html json:用于字符串和Python数据类型间进行转换pickle: 用于python特有的 ...