Vue点击切换Class变化,实现Active当前样式操作
更新时间：2020年07月17日 10:49:35 作者：大根哥
这篇文章主要介绍了Vue点击切换Class变化,实现Active当前样式操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
刚入门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;
},
完事，欢迎小伙伴有更好的方法分享哈~ 希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中实现左右联动的效果，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-06-06
Vue3中使用defineCustomElement 定义组件详解
这篇文章主要为大家介绍了Vue3中使用defineCustomElement 定义组件详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了Vue2.5学习笔记之如何在项目中使用和配置Vue的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了vue 使用 canvas 实现手写电子签名功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了Vue如何基于es6导入外部js文件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了vue中require与import的区别详解,require相当于module.exports的传送门,module.exports后面的内容是什么,require的结果就是什么,对象、数字、字符串、函数,再把require的结果赋值给某个变量,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了从零开始在NPM上发布一个Vue组件的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了怎样查看vue-cli的安装位置问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了详解如何写出一个利于扩展的vue路由配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
今天小编就为大家分享一篇vue实现在一个方法执行完后执行另一个方法的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论