Vue点击切换Class变化,实现Active当前样式操作


Posted in Javascript onJuly 17, 2020

刚入门Vue没多久,在制作过程中遇到很多简单实用的小技巧。

没有太多的墨水,直接上代码:

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

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

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

<li :class="activeClass == index ? 'active':''" v-for="(item,index) in itemList" :key="index" @click="getItem(index)">
     {{itme.text}}
    </li>

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

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

四、在style中写上 .active 样式

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

补充知识:Vue实现非循环active点击切换样式

我就废话不多说了,大家还是直接看代码吧~

<div class="tab_basic">
  <span :class="{to_active:shows==1}" @click="today_a">日</span>
  <span :class="{to_active:shows==2}" @click="today_b">月</span>
  <span :class="{to_active:shows==3}" @click="today_c">年</span>
</div>
<style>
.to_active {background: #409eff!important;color: #fff;}
</style>
然后在method里定义
today_a(){
this.shows = 1;
},
today_b(){
this.shows = 2;
},
today_c(){
this.shows = 3;
},

完事,欢迎小伙伴有更好的方法分享哈~ 希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript解析json数据的3种方式
May 08 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
使用JavaScript通过前端发送电子邮件
May 22 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 #Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 #Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 #Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 #Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 #Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 #Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 #Javascript
You might like
精通php的十大要点(上)
2009/02/04 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
php车辆违章查询数据示例
2016/10/14 PHP
nginx 设置多个站跨域
2021/03/09 Servers
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
python多线程threading.Lock锁用法实例
2014/11/01 Python
Python实现的检测网站挂马程序
2014/11/30 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
python实现人脸识别代码
2017/11/08 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
一百多行python代码实现抢票助手
2018/09/25 Python
Django 限制访问频率的思路详解
2019/12/24 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
高性能装备提升营地:Kammok
2019/02/27 全球购物
计算机操作自荐信
2013/12/07 职场文书
供货协议书
2014/04/22 职场文书
同学聚会通知书
2015/04/20 职场文书
祝寿主持词
2015/07/02 职场文书
创业计划书之寿司
2019/07/19 职场文书