vue单击li变色,点谁谁亮

示意代码如下:

<div class="box-list" :class="activeClass == index ? 'active' : ''" v-for="(value,index) in     grouplist" :key="index" @click="getItem(value,index)"> {{value.name}}
</div>

主要就是绑定class, 然后利用这个三元表达式做出判断, 或者是active或者是 ‘’,activeClass 是变量index 是数组groupList的下标,active是类名
1.在data 中给 activeClass: -1
2.在方法 getItem(value,index) 中给 this.activeClass = index 赋值
3.在style中 .active {color:pink} 给出自己想要的样式

vue单击li变色,点谁谁亮相关推荐

vue如何sleep_H5如何保持屏幕常亮—nosleep.js
前言此教程是在vue中引入nosleep.js,并使用. 安装 nosleep.js npm install nosleep.js 引入在main.js中引入 import NoSleep fro ...
css 选中li变色,鼠标移到导航当前位置的LI变色处于选中状态
鼠标移到导航上面当前的LI变色处于当前的位置,广泛应用于当前导航. 鼠标移到导航上面当前的LI变色处于当前的位置 ul,li{list-style:none;} #nav li{display ...
vue tag=“li“ 和event原有样式渲染不出来
vue-router3.0以前这样写router-link 加上tag标签,router-link就会渲染成原有的li标签 <ul><router-link tag="li ...
Vue ul li 列表最后一个子元素 “不需要列表横线写法”
Vue里面 ul li 列表最后一个子元素 "不需要列表横线写法" .blockflex 1text-align centerborder-right 1px solid rgb ...
DataGrid和GridView单击背景变色双击颜色还原
DataGrid中首先我们假设.aspx文件中DataGrid的数据行的样式为 <AlternatingItemStyle BackColor="White" ForeCo ...
vue搜索关键字变色
// 替换匹配的文字 contentSearch (value, array) { let arrayContent = array // 匹配关键字正则 let replaceReg = new R ...
vue制作日历_如何使用Vue制作每月日历
vue制作日历 Have you ever seen a calendar on a webpage and thought, how the heck did they did that? For ...
vue——todo案例
1.创建工程和组件 ①:初始化todo工程: vue create todo-demo (将欢迎界面清理,重置app.vue) ②: 创建3个组件(布局样式略) : src-components-T ...
java vue 开发总结（大学生学习版）
2022-8-25 1.数据库自动更新createTime和updateTime字段注:数据库相应字段类型为date datetime贴膜或timestamp均可以 xml中也要相应写上字段 (1 ...

vue单击li变色,点谁谁亮

vue单击li变色,点谁谁亮相关推荐

最新文章

热门文章