如何建设简单小型网站,ui培训机构排行榜,企业免费网站注册,北京都有哪些公司名称需求#xff1a;做一个卡片样式的列表#xff0c;之后有一些基本信息#xff0c;之后卡片选中后样式不一样#xff0c;默认选中第一个卡片#xff0c;点击卡片后可以获取到卡片的信息 一、效果 二、关键代码
index默认重0开始,activeTable默认为0,0-0等于0#xff0c;但… 需求做一个卡片样式的列表之后有一些基本信息之后卡片选中后样式不一样默认选中第一个卡片点击卡片后可以获取到卡片的信息 一、效果 二、关键代码
index默认重0开始,activeTable默认为0,0-0等于0但是有个!那就是取反的意思那就是true 就是点击的这个会有选中的active样式也就是默认第一个会被选中之后点击其他卡片只需要把index给赋值给activeTab就能实现了 div classmenu-listdiv v-for(item, index) in menuTableData :keyindexdiv :class{ active: !(index - activeTab), menus: menus } clickmenuClick(item, index)div classmenu-avatari classel-icon-star-off/i/divdiv classmenu-text{{ item.name }}/div/div/div/div
三、完整代码
templatediv stylewidth: 600px; margin-top: 50pxdiv classmenu-listdiv v-for(item, index) in menuTableData :keyindex!-- index0,activeTable默认为0,0-0等于0但是有个!那就是取反的意思那就是true 就是点击的这个会有选中的active样式--div :class{ active: !(index - activeTab), menus: menus } clickmenuClick(item, index)div classmenu-avatari classel-icon-star-off/i/divdiv classmenu-text{{ item.name }}/div/div/div/div/div
/templatescript
export default {data() {return {menuTableData: [{name: 李华},{name: 张三},{name: 李四}],activeTab: 0 //根据点击进行高亮};},mounted() {},methods: {menuClick(item, index) {this.activeTab index;console.log(item, 点击菜单管理获取);}}
};
/scriptstyle langscss 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文章到此结束希望对你有所帮助~
