将 Css 类添加到 nativescript-vue 中的按钮点击答案

【问题标题】：Add Css Class to button tap in nativescript-vue将 Css 类添加到 nativescript-vue 中的按钮点击
【发布时间】：2019-02-18 13:58:34
【问题描述】：

我已经动态检索按钮，我想为被点击的按钮添加边框底部 css 样式。但它适用于所有按钮。我该如何解决这个问题？我想保留所有选项卡作为默认选择。enter image description here enter image description here

all(){
                alert('all');
                this.isAllActive = true;
                this.isActive = false;
                this.TabGender = null;
                this.TabCategory = null;
                this.TabSub_Category = null;
            },
            selectTab: function (gender, category, sub_category,args) {
                alert(args);
                this.TabGender = gender; 
                this.TabCategory = category;
                this.TabSub_Category = sub_category;
                alert(this.TabGender+this.TabCategory+this.TabSub_Category);
                this.isActive = true;
                this.isAllActive = false;
                //this.makeTabActive(args);
            }

.category_label {
        height: 35;
        vertical-align: middle;
        padding: 5 15;
        margin: 0 4;
        background-color: #344955;
        color: #FFFFFF;
        border-radius: 5;
        font-size: 16;
    }

    

    .active {
        border-width: 0 0 4 0;
        border-color: #F9AA33;
    }

<StackLayout orientation="horizontal" style="padding-left:5">
 <Button text="ALL" class="category_label" :class="{active:isAllActive}" @tap="all"/>
 <template v-for="(tab,index) in tabs" marginBottom="5">
 <Button :text="tab.gender.charAt(0).toUpperCase(0)+'-'+tab.sub_category" :key="index" class="category_label"
  :class="{active:isActive}" @tap="selectTab(tab.gender,tab.category,tab.sub_category,index)" />
  </template>
</StackLayout>

【问题讨论】：

标签： nativescript nativescript-vue

【解决方案1】：

只需使用border-bottom-color 和border-bottom-width，应该可以。

示例

.active {
    border-bottom-color: yellow;
    border-bottom-width: 2;
}

Playground Sample

【讨论】：

我使用模板进行循环。按钮是根据服务器获得的响应动态创建的
没关系，按钮是用ngFor动态还是simple，语法都是一样的。