需求：做一个卡片样式的列表，之后有一些基本信息，之后卡片选中后样式不一样，默认选中第一个卡片，点击卡片后可以获取到卡片的信息
一、效果
二、关键代码
index默认重0开始,activeTable默认为0,0-0等于0，但是有个!那就是取反的意思，那就是true ，就是点击的这个会有选中的active样式，也就是默认第一个会被选中，之后点击其他卡片只需要把index给赋值给activeTab就能实现了
<div class="menu-list"><div v-for="(item, index) in menuTableData" :key="index"><div :class="{ active: !(index - activeTab), menus: 'menus' }" @click="menuClick(item, index)"><div class="menu-avatar"><i class="el-icon-star-off"></i></div><div class="menu-text">{{ item.name }}</div></div></div></div>三、完整代码
<template><div style="width: 600px; margin-top: 50px"><div class="menu-list"><div v-for="(item, index) in menuTableData" :key="index"><!-- index==0,activeTable默认为0,0-0等于0，但是有个!那就是取反的意思，那就是true ，就是点击的这个会有选中的active样式--><div :class="{ active: !(index - activeTab), menus: 'menus' }" @click="menuClick(item, index)"><div class="menu-avatar"><i class="el-icon-star-off"></i></div><div class="menu-text">{{ item.name }}</div></div></div></div></div>
</template><script>
export default {data() {return {menuTableData: [{name: '李华'},{name: '张三'},{name: '李四'}],activeTab: 0 //根据点击进行高亮};},mounted() {},methods: {menuClick(item, index) {this.activeTab = index;console.log(item, '点击菜单管理获取');}}
};
</script><style lang="scss" scoped>
.menu-list {height: calc(100vh - 360px);overflow: auto;display: flex;flex-direction: column;box-sizing: border-box;// 左侧主要样式.menus {/* 矩形 7 */width: 300px;height: 80px;background: rgb(255, 255, 255);box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);border-radius: 4px;margin: 20px 20px;display: flex;align-items: center;.menu-avatar {/* 椭圆形 */width: 43px;height: 43px;background: rgba(163, 241, 255, 0.4);border-radius: 50%;display: flex;justify-content: center;align-items: center;margin-left: 20px;i {font-size: 25px;color: #fff;}}.menu-text {/* 用户管理 */color: pink;font-family: 阿里巴巴普惠体;font-size: 18px;font-weight: 400;line-height: 22px;letter-spacing: -1px;text-align: left;margin-left: 20px;}}// 选中菜单管理列表后高亮.active {box-shadow: 0px 8px 8px 0px rgba(27, 19, 19, 0.1);.menu-avatar {background: rgb(156, 210, 241);}.menu-text {font-weight: 600;}}
}
</style>
文章到此结束希望对你有所帮助~
