#vue# 【七】实现点击切换active样式tab栏的制作思路步骤！

class="baidu_pl">

class="article_content clearfix">

class="markdown_views prism-atom-one-dark">

class="tags" href="/tags/VUE.html" title=vue>vue_activetab_0">#class="tags" href="/tags/VUE.html" title=vue>vue# 实现点击切换active样式&tab栏的制作思路步骤！

语法：
：class={active:变量名}、@click=“方法名”、布尔值

需求：需要有当前态（就是状态的是被选中模式），
点击以后切换到另一个tab页，且加入active的样式

适用场景：tab栏、导航栏

思路：
（1）tab栏、导航栏这些一般都是差不多样式的，所以共用一个类名，不要设置宽度

（2）再写鼠标点击以后的样式（即系active）
:active表示鼠标点击状态

class="prism language-bash">.active class="token punctuation">{
    xxxxx
class="token punctuation">}

（3）在需要切换的标签处，绑定class的active，设置布尔值

class="prism language-bash">:classclass="token operator">=class="token string">"{'active':onShow}" //onShow 是一个变量名来的，赋的值是布尔值（true/false）

（4）在data-----return里面设置tab栏、导航栏的初始化状态

class="prism language-bash"> dataclass="token punctuation">(class="token punctuation">) class="token punctuation">{
        class="token keyword">return class="token punctuation">{
            onShow:true, 
            offShow:false
        class="token punctuation">}
    class="token punctuation">},

（5）绑定鼠标class="tags" href="/tags/DianJiShiJian.html" title=点击事件>点击事件，在再methods里面写入，触发事件时，标签的布尔值进行切换

class="prism language-bash">@clickclass="token operator">="getTimeclass="token punctuation">(class="token punctuation">)
 methods: class="token punctuation">{
        getTimeclass="token punctuation">(class="token punctuation">) class="token punctuation">{
           this.onShow class="token operator">= class="token boolean">trueclass="token punctuation">;
           this.offShow class="token operator">= class="token boolean">falseclass="token punctuation">;
        class="token punctuation">},

完整的demo代码如下：

class="prism language-bash">class="token operator"><templateclass="token operator">>
   class="token operator"><divclass="token operator">>
       class="token operator"><p classclass="token operator">=class="token string">"info-item" :classclass="token operator">=class="token string">"{'active':onShow}" @clickclass="token operator">=class="token string">"getTime()"class="token operator">>我是小丸子class="token operator"></pclass="token operator">>
       class="token operator"><p classclass="token operator">=class="token string">"info-item" :classclass="token operator">=class="token string">"{'active':offShow}" @clickclass="token operator">=class="token string">"getText()"class="token operator">>我是盖子盖子class="token operator"></pclass="token operator">>
   class="token operator"></divclass="token operator">>

class="token operator"></templateclass="token operator">>

class="token operator"><scriptclass="token operator">>

class="token function">export default class="token punctuation">{
    dataclass="token punctuation">(class="token punctuation">) class="token punctuation">{
        class="token keyword">return class="token punctuation">{
           //因为在初始化的时候，就已经有一个当前态样式了，
            所以在触发class="tags" href="/tags/DianJiShiJian.html" title=点击事件>点击事件以后，应该还是跟前面的布尔值保持一致，具体多试一下就知道了
            onShow:true, 
            offShow:false
        class="token punctuation">}
    class="token punctuation">},
    methods: class="token punctuation">{
        getTimeclass="token punctuation">(class="token punctuation">) class="token punctuation">{
           this.onShow class="token operator">= class="token boolean">trueclass="token punctuation">;
           this.offShow class="token operator">= class="token boolean">falseclass="token punctuation">;
        class="token punctuation">},
        getTextclass="token punctuation">(class="token punctuation">) class="token punctuation">{
            this.onShow class="token operator">= class="token boolean">falseclass="token punctuation">;
            this.offShow class="token operator">= class="token boolean">trueclass="token punctuation">;
        class="token punctuation">}


    class="token punctuation">}


class="token punctuation">}
class="token operator"></scriptclass="token operator">>

class="token operator"><style scopedclass="token operator">>
div class="token punctuation">{
    width: 10remclass="token punctuation">;
    height: 5remclass="token punctuation">;
    background-color: class="token comment">#FECC8F;
    margin: 1rem autoclass="token punctuation">;
class="token punctuation">}
.info-item class="token punctuation">{
    display: inline-blockclass="token punctuation">;
    width:2remclass="token punctuation">;
    height: 2remclass="token punctuation">;
    background-color: class="token comment">#FFFFFF;
    font-size: .2remclass="token punctuation">;
    color: class="token comment">#000000;
    margin-top: .8remclass="token punctuation">;
    margin-right: .8remclass="token punctuation">;
class="token punctuation">}
.active class="token punctuation">{
    background-color: class="token comment">#DA1A14;
class="token punctuation">}
class="token operator"></styleclass="token operator">>