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 相关文章推荐
jQuery.extend 函数的详细用法
Jun 27 Javascript
js轮播图代码分享
Jul 14 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 Javascript
原生JS实现多条件筛选
Aug 19 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
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原理的opcodes(操作码)
2010/10/26 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
Python 深入理解yield
2008/09/06 Python
Python实现115网盘自动下载的方法
2014/09/30 Python
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
Python的动态重新封装的教程
2015/04/11 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
10款最好的Python开发编辑器
2019/07/03 Python
对Python _取log的几种方式小结
2019/07/25 Python
详解python中index()、find()方法
2019/08/29 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
中级会计职业生涯规划书
2014/03/01 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
综合素质评价自我评价
2015/03/06 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
千与千寻观后感
2015/06/04 职场文书