Question

我有动态检索的按钮，我想为点击的按钮添加边框底部的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>

Answer 1

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

示例

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

Playground Sample

将CSS类添加到nativescript-vue中的按钮点击

1 个答案: