Vue点击动态添加Class

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

    data() {return {activeClass: -1,// 0为默认选择第一个，-1为不选择list: [{title: '全网搜索(100w+)'},{title: '优惠推荐(包邮10w+)'},],}},

2.在Template里面的代码，切记在click方法里面要传k

 <el-row class="list"><el-col :span="12" v-for="(v,k) in list" :key="k" :class="activeClass ==k?'active':''"><span @click="IsActive(k)">{{v.title}}</span></el-col></el-row>

3.CSS代码

.active {border-bottom: 1px solid #FE4520;color: #FE4520;}

4.methods代码

    methods: {IsActive(k) {this.activeClass = k;}}

Vue点击动态添加Class相关推荐

vue给html动态添加属性,Vue中怎么动态添加类名？
能够向组件添加动态类名是非常强大的功能.它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体. 添加动态类名与在组件中添加 prop :class=" ...
vue当中addRoutes动态添加路由白屏解决和next(),next(“/“)的一些区别
问题产生前言使用动态添加路由router.addRoutes()后进入一个页面,对着这一个页面刷新一下,然后页面就白屏了并且不管刷新多少次都没有用,依旧是白屏,只有重新进入页面才有效果比如对于网站 ...
Vue路由的动态添加和缓存
1.addRouter和addRouters 二者都是动态添加路由.其中addRouters和addRouter的用法差不多,只不过addRouters中要传入数组 router.addRouters ...
vue中使用动态添加路由(router.addRoutes)加载权限侧边栏的两种方式
工作中我们经常会遇到这种需求,后台定义用户的权限数据,前端进行获取,并渲染在侧边栏导航上,不同权限的用户看到的侧边栏是不同的.即前端渲染的数据是随着后台的改变而改变的,做到真正的前后端分离. 一.拿到 ...
html表格新插入一列,VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据来的 ...
学习笔记之vue根据权限动态添加路由
路由守卫判断 router.beforeEach((to, from, next) => {if (to.path == '/login') {sessionStorage.removeItem ...
vue点击事件添加html,vue 中拼接html时添加点击事件
添加 1111 export default { data() { return { tooltip:"test", }; }, methods: { hahha(){ var i ...
vue 点击动态展示不同的图片
代码部分:可以用三目运算根据状态判断 <div class="svt-s mainSty-center"><div class="svs hand&qu ...
vue获取table一列数据_VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据 ...

Vue点击动态添加Class

Vue点击动态添加Class相关推荐

最新文章

热门文章