刚自学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日期加天数,小时,分钟...得到新的时间

    在当前的日期上加三天,天数随便改: SELECT date_add(CURRENT_DATE(), interval 3 day); 在指定的日期上加三天: SELECT date_add('2014 ...

  2. python之optparse

    Python有两个内建的模块用来处理命令行参数 一个是getopt只能简单处理命令行参数 一个是optparse,功能更强大,而且易于使用,可以方便地生成标准的,符合Unix/Posix规范的命令行说 ...

  3. Luogu P5339 [TJOI2019]唱、跳、rap和篮球

    题目 设\(f_i\)表示从\((a-4i,b-4i,c-4i,d-4i)\)中选\(n-4i\)个排队的方案数. 那么我们可以容斥,答案为\(\sum\limits_{i=0}^{lim}(-1)^ ...

  4. RabbitMq学习2-php命令行模式测试rabbitmq

    一.RabbitMQ结构 1.几个概念说明:       Broker:简单来说就是消息队列服务器实体. Exchange:消息交换机,它指定消息按什么规则,路由到哪个队列. Queue:消息队列载体 ...

  5. 最长公共子序列(LCS) Medium2

    The company "21st Century Fruits" has specialized in creating new sorts of fruits by trans ...

  6. CyclicBarrier、CountDownLatch、Callable、FutureTask、thread.join() 、wait()、notify()、Condition

    CyclicBarrier使用: import java.util.Random; import java.util.concurrent.BrokenBarrierException; import ...

  7. Django之F和Q查询

    一.F查询 rom django.db.models import F from app01.models import Book Book.objects.update(price=F(" ...

  8. 大div中,三个小div水平居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. git error: failed to push some refs to 'git@github.com:xxx/xxx.git'

    本地仓库中和远程仓库不一致,缺少readme.md文件 解决方式参见:https://blog.csdn.net/qq_37281252/article/details/79044798

  10. UITableViewCell选中后子View背景色被Clear

    在TableView中,当cell 处于Hightlighted(高亮)或者Selected(选中)状态下,Cell上的子控件的背景颜色会被 Clear. 解决方法:(4种) 1. 直接设置子控件的 ...