刚自学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. 教你在 IntelliJ IDEA 中使用 VIM!

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 IdeaVim(下载)插件可以让你在IntelliJ IDEA中键盘敲的飞起. 安装 打开IDEA的设置,在Plugins里 ...

  2. 用nopcomerce3.8版本的同行注意了,前2天发布3.8正式版后,作者收到一些BuG,作者修复后重新提供了一个源代码包下载.

    用nopcomerce3.8版本的同行注意了,前2天发布3.8正式版后,作者收到一些BuG,作者修复后重新提供了一个源代码包下载地址,不是github上的那个链接.去作者官网论坛我那个链接地址,或关注 ...

  3. 异步Promise及Async/Await可能最完整入门攻略

    此文只介绍Async/Await与Promise基础知识与实际用到注意的问题,将通过很多代码实例进行说明,两个实例代码是setDelay和setDelaySecond. tips:本文系原创转自我的博 ...

  4. Enlarge GCD(素数筛)

    题意 删去最少的数,使gcd变大 题解 只要保留相同素数因子最多的数即可. 素数筛. C++代码 #include<bits/stdc++.h> using namespace std; ...

  5. 利用AXI VDMA实现OV5640摄像头采集

    利用AXI VDMA实现OV5640摄像头采集 导读:摄像头采样图像数据后经过VDMA进入DDR,通过PS部分控制,经过三级缓存,将DDR中保持的图形数据通过VDMA发送出去.在FPGA的接收端口产生 ...

  6. 算法(C#版)动态规划和贪心算法

    https://blog.csdn.net/kouzhuanjing1849/article/details/88954811

  7. MATLAB图像的代数运算

    1.图像旋转与缩放 bm=imread("3.png"); %subplot(1,3,1); imshow(bm); %缩放图片 %bt=imresize(bm,0.5,'near ...

  8. C++泛型程序设计---算法和提升

    算法和提升 算法:所谓算法就是一个求解问题的过程或公式,即,通过一个有穷的计算序列生成结果. 函数模板就是普通函数的泛化:它能对多种数据类型执行动作,并且能用以参数方式传递来的各种操作实现要执行的工作 ...

  9. 2018 Web 开发者路线图[转载]

    2018 Web 开发者路线图[转载] https://qianduan.group/posts/5a66f36e0cf6b624d2239c74?hmsr=toutiao.io&utm_me ...

  10. 从零开始学MySQL(四)

    上节连接:https://www.cnblogs.com/RajXie/p/10880809.html 上节说到,在创建表的同时,需要给出列的定义.列的定义可展开如下: 列名 列的数据类型 列的一些其 ...