刚自学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. 使用eclipse创建mavenWeb项目,中途遇到的问题及解决方案!

    创建MavenWeb项目的步骤,如下: 1).new--->Maven --->maven project,如图: 之后, next,最后finish,项目创建完成,项目的目录如下: 将w ...

  2. IDEA使用指北教程

    来自官网的指导手册: https://www.jetbrains.com/help/idea/2019.1/run-for-the-first-time.html?section=Windows 记得 ...

  3. 卸载yum-mysql

    注意事项:1. 卸载yum MYSQLsystemctl status mysqlsystemctl stop mysqlsystemctl disable mysqld rpm -qa | grep ...

  4. HTML中button标签点击实现页面跳转

    方法1:使用onclick事件 <input type="button" value="按钮" onclick="javascrtpt:wind ...

  5. 安装最新版Elasticsearch报错

    1 问题:ERROR: bootstrap checks failed max file descriptors [4096] for elasticsearch process likely too ...

  6. PCIeのType0与Type1型配置请求与BAR(基地址寄存器)

    PCIe中存在两种配置空间Type0&type1,TYPE0对应非桥设备(Endpoint),Type1对应桥设备(Root和Switch端口中的P2P桥)因为Root每个端口总都含有一个P2 ...

  7. asp.net Excel导入和导出

    1.Excel数据导入到数据库中: //该方法实现从Excel中导出数据到DataSet中,其中filepath为Excel文件的绝对路径,sheetname为表示那个Excel表:        p ...

  8. tornado + nginx + supervisord 环境部署

    学习tornado有一周多了,自己按着demo中的例子手动搬代码,收获还是有的,加深了理解.demo: http://demo.pythoner.com/itt2zh/ch8.html 大概明白了它怎 ...

  9. nginx之热部署,以及版本回滚

    热部署的概念:当从老版本替换为新版本的nginx的时候,如果不热部署的话,会需要取消nginx服务并重启服务才能替换成功,这样的话会使正在访问的用户在断开连接,所以为了不影响用户的体验,且需要版本升级 ...

  10. 【转】uboot中的mmc命令

    转自:https://www.cnblogs.com/yxwkf/p/3855383.html 1:mmcinfo 输入: mmcinfo 显示结果:Manufacturer ID: 45OEM: 1 ...