vue切换class_Vue点击切换Class变化,实现Active当前样式操作
刚入门Vue没多久,在制作过程中遇到很多简单实用的小技巧。
没有太多的墨水,直接上代码:
一、先在data里增加一个变量,用来储存当前点击的元素
data() {
return {
activeClass: -1, // 0为默认选择第一个,-1为不选择
};
},
二、在Template里面的代码,切记在@click方法里面要传index,
{{itme.text}}
三、点击事件:改变data里面activeClass的值
getItme(index) {
this.activeClass = index; // 把当前点击元素的index,赋值给activeClass
},
四、在style中写上 .active 样式
.active {
/* background: #eee; */
color: #1e82d2;
font-weight: bolder;
}
补充知识:Vue实现非循环active点击切换样式
我就废话不多说了,大家还是直接看代码吧~
日
月
年
.to_active {background: #409eff!important;color: #fff;}
然后在method里定义
today_a(){
this.shows = 1;
},
today_b(){
this.shows = 2;
},
today_c(){
this.shows = 3;
},
完事,欢迎小伙伴有更好的方法分享哈~ 希望能给大家一个参考,也希望大家多多支持云海天教程。
原文链接:https://blog.csdn.net/a350110085/article/details/81605092
vue切换class_Vue点击切换Class变化,实现Active当前样式操作相关推荐
- 微信小程序点击tab栏切换,点击切换某个tab滚动到中间( uniapp )
微信小程序点击tab栏切换,点击某个tab滚动到中间( uniapp ) 之前写过原生js的tab栏滚动到中间,正好最近有个uniapp小程序项目中要用到tab切换滚动, 写个demo发出来 + 注意 ...
- js清空文本框的值_一个Vue.js实例控制字变大变小,含样式操作,flex布局。「603」...
这是一个用vue.js对css操作完成的实例. 当然用了flex简单布局. 一.先创建一个html文件,记得添加vue库文件. 二.创建一盒容器vmdiv,用vue绑定它,测试vue绑定后的插入值te ...
- vue动态点击切换css样式且子元素动态显示和隐藏
vue动态点击切换css样式并子元素动态显示和隐藏 <template><div v-for="i in 5" class="el-personal&q ...
- vue点击切换css样式
vue动态点击切换css样式 <template><div v-for="i in 5" class="el-personal" :class ...
- Vue 实现图片在循环中 默认 和 选中 之间的点击切换
Vue 实现图片在循环中 默认 和 选中 之间的点击切换 html <ul style="font-size:20px;"><li:key="lesso ...
- vue限制点击次数_vue点击切换颜色限制个数(用了mui框架)
vue点击切换颜色 只能点击一个 修改资料--类别 类别 保存 {{item.msg}} 最多可选择三项 mui.init() var categroy = new Vue({ el:'#categr ...
- 如何给Vue v-for循环渲染出的元素(导航栏) 批量添加点击事件 及 点击后添加css类样式 及 点击后路由跳转切换
如何给Vue v-for循环渲染出的元素 批量添加点击事件 及 点击后添加css类样式 及 点击后路由跳转切换 能够实现或解决的问题 给Vue v-for循环出的元素批量添加点击事件,并以自己在数组中 ...
- vue两个按钮切换_在vue中实现多个按钮样式的点击切换?
1.在vue中实现多个按钮样式的点击切换?有多个按钮,点击其中一个出现下划线,而另一个回到原始状态. 点击其中一个两个同时出现下划线样式: 再次点击两个都还原成最初的样式,即有下划线: 如何实现只有被 ...
- Vue实现active点击切换
循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click="active(index)" 2.将索引值传入class(索引等于几就第几个添加active类) ...
最新文章
- 序列建模:时间卷积网络取代RNN(An Empirical Evaluation of Generic Convolutional and Recurrent)论文 pdf
- mac u盘文件过大 拷贝不进去_使用mac时文件太大无法拷贝怎么办
- 互信息 卡方 - 文本挖掘
- 性能测试监控工具nmon安装及使用方法
- java大数据开发是做什么的_Java转型大数据开发教材,技能储备都在这儿!
- 从技术角度聊聊,短视频为何让人停不下来?
- linux火狐打不开网页视频下载,win10下火狐浏览器无法打开网页视频的解决方法...
- Kafka学习笔记(3)----Kafka的数据复制(Replica)与Failover
- Stream流思想和常用方法
- 开源Math.NET基础数学类库使用(04)C#解析Matrix Marke数据格式
- 拼图项目的动机和目标
- 用稳压管保护单片机引脚_一步一步,全程揭开单片机的原理,让做电子变得轻松自如!...
- js面向对象编程(二)构造函数的继承(转载)
- SDP在SIP协议中的应用
- 使用DragonBones开发FLASH骨骼动画入门教程
- weblogic部署模式
- 【matlab图像处理】图像直方图操作和matlab画图
- SSH远程登录原理学习
- elk面试题_ELK 原理 使用 面试
- ubuntu14.04 iso硬盘安装