#vue# 实现点击切换active样式&tab栏的制作思路步骤！
语法：
：class={active:变量名}、@click=“方法名”、布尔值
需求：需要有当前态（就是状态的是被选中模式），
点击以后切换到另一个tab页，且加入active的样式
适用场景：tab栏、导航栏
思路：
（1）tab栏、导航栏这些一般都是差不多样式的，所以共用一个类名，不要设置宽度
（2）再写鼠标点击以后的样式（即系active）
:active表示鼠标点击状态
.active {xxxxx}
（3）在需要切换的标签处，绑定class的active，设置布尔值
:class="{'active':onShow}" //onShow 是一个变量名来的，赋的值是布尔值（true/false）
（4）在data-----return里面设置tab栏、导航栏的初始化状态
data() {return {onShow:true, offShow:false}},
（5）绑定鼠标点击事件，在再methods里面写入，触发事件时，标签的布尔值进行切换
@click="getTime()methods: {getTime() {this.onShow = true;this.offShow = false;},
完整的demo代码如下：
<template><div><p class="info-item" :class="{'active':onShow}" @click="getTime()">我是小丸子</p><p class="info-item" :class="{'active':offShow}" @click="getText()">我是盖子盖子</p></div></template><script>export default {data() {return {//因为在初始化的时候，就已经有一个当前态样式了，所以在触发点击事件以后，应该还是跟前面的布尔值保持一致，具体多试一下就知道了onShow:true, offShow:false}},methods: {getTime() {this.onShow = true;this.offShow = false;},getText() {this.onShow = false;this.offShow = true;}}}</script><style scoped>div {width: 10rem;height: 5rem;background-color: #FECC8F;margin: 1rem auto;}.info-item {display: inline-block;width:2rem;height: 2rem;background-color: #FFFFFF;font-size: .2rem;color: #000000;margin-top: .8rem;margin-right: .8rem;}.active {background-color: #DA1A14;}</style>
