vue中实现点击按钮（多个）添加样式并展示对应内容（模块） 类似tab栏切换 展示对应模块这里实现两种 一种是展示不同模块 第二种是根据值展示相同模块
<template> <div class="all"> <div class="role-content"> <div class="role-btn " @click="roleChecked0" :class="role0 == true ? 'active' : ''" > 测试1 </div> <div class="role-btn " @click="roleChecked1" :class="role1 == true ? 'active' : ''" > 测试2 </div> <div class="role-btn " @click="roleChecked2" :class="role2 == true ? 'active' : ''" > 测试3 </div> <!-- 一种是展示不同模块 --> <div v-if="status === '测试1'">测试一配套显示</div> <div v-if="status === '测试2'">测试二配套显示</div> <div v-if="status === '测试3'">测试三配套显示</div> <!-- 第二种是根据值展示相同模块 --> <div v-if="demo.includes(this.status)"> 当点击测试的三个按钮，只有status是'测试2''测试3'才会展示，点击测试一按钮无效 </div> </div> </div> </template> <script> export default { data() { return { role0: true, role1: false, role2: false, status: '测试1', demo: ['测试2', '测试3'] } }, methods: { roleChecked0() { this.role0 = true this.role1 = false this.role2 = false this.status = '测试1' }, roleChecked1() { this.role0 = false this.role1 = true this.role2 = false this.status = '测试2' }, roleChecked2() { this.role0 = false this.role1 = false this.role2 = true this.status = '测试3' } } } </script> <style lang="scss" scoped> .all { // 点击添加类的样式 .active { color: #000; border: 1px solid #f00; } //主体部分的样式 .role-content { .role-btn { font-size: 14px; width: 60px; height: 80px; line-height: 80px; text-align: center; margin-right: 15px; display: inline-block; background-color: #f6f6f6; } } } </style>注：在这里初始值一定要设置正确，不然会出现刚进入页面添加类的按钮和下面展示的模块不对应 关于点击添加类的样式在style中的位置，在all外面和里面都可以实现
