刚自学Vue不久,所以还不太熟,所以直接上代码。

一、先在data里增加一个变量,用来储存当前点击的元素

  1. data() {
  2. return {
  3. activeClass: -1, // 0为默认选择第一个,-1为不选择
  4. };
  5. },

二、在Template里面的代码,切记在@click方法里面要传index,

  1. <li :class="activeClass == index ? 'active':''" v-for="(itme,index) in itmeList" :key="index" @click="getItme(index)">
  2. {{itme.text}}
  3. </li>

三、点击事件:改变data里面activeClass的值

  1. getItme(index) {
  2. this.activeClass = index; // 把当前点击元素的index,赋值给activeClass
  3. },

四、在style中写上 .active 样式

  1. .active {
  2. /* background: #eee; */
  3. color: #1e82d2;
  4. font-weight: bolder;
  5. }

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联合索引

    重要概念: 1.对于mysql来说,一条sql中,一个表无论其蕴含的索引有多少,但是有且只用一条. 2.对于多列索引来说(a,b,c)其相当于3个索引(a),(a,b),(a,b,c)3个索引,又由于 ...

  2. JavaScript event对象clientX,offsetX,screenX异同

    event对象是JavaScript中最重要的对象之一,他代表了各种事件的状态,在各种事件的事件处理中经常用到,比如键盘活动.鼠标活动等等,其中有几个对象官方说的比较模糊,很难理解,这里有必要通俗化的 ...

  3. 通过编写串口助手工具学习MFC过程——(八)遇到的一些问题

    通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...

  4. js实现计算器效果

    <!DOCTYPE html> <html> <!-- Created using jsbin.com Source can be edited via http://j ...

  5. vscode配置golang

    https://www.cnblogs.com/Leo_wl/p/8242628.html https://www.cnblogs.com/angelyan/p/10400789.html 主要看了这 ...

  6. linux 更改 mysql 管理员口令

    #更改口令前,确保 mysql 服务已经正常启动 mysqladmin –u root passwd 新口令 #登陆 mysql ./mysql –u root –p Enter password:新 ...

  7. mknod - 建立块专用或字符专用文件

    总览 mknod [options] name {bc} major minor mknod [options] name p GNU 选项(缩写): [-m mode] [--help] [--ve ...

  8. Win10遇到蓝屏错误CRITICAL_STRUCTURE_CORRUPTION如何解决

    很多使用win10系统的用户,都曾经遇到过蓝屏故障.比如,最近有位win10用户在使用电脑时,就发现电脑突然出现了蓝屏,且提示错误CRITICAL_STRUCTURE_CORRUPTION,这是怎么回 ...

  9. 牛客练习赛33 C tokitsukaze and Number Game (结论+字符串处理)

    链接:https://ac.nowcoder.com/acm/contest/308/C 来源:牛客网 tokitsukaze and Number Game 时间限制:C/C++ 1秒,其他语言2秒 ...

  10. CCPC-Wannafly Winter Camp Day1 (Div2, onsite) 夺宝奇兵

    题目描述 wlswls所在的王国有nn个居民(不包括wlswls),他们共有mm件神奇的宝物. 对于第ii件宝物,wlswls可以花费a_iai​的金币把它从原来的主人那里买过来. 请问wlswls最 ...