component-切换选中状态具体样式更改

1.例

        实现默认选中初始值，点击选中对应状态。

2.代码

2.1 html

<span @click="ponIn()" class="market-switch" :style="{color: SelectedOne ? '':'#1890FF',borderBottom:SelectedOne ? '':'1px solid #1890FF'}">业务1</span>
<span @click="ponOut()" class="market-switch" :style="{color: SelectedTwo ? '':'#1890FF',borderBottom:SelectedTwo ? '':'1px solid #1890FF'}">业务2</span>

2.2 js

data

 data() {
        return {
            SelectedOne:false,
            SelectedTwo:true,
        }
    }

methods

methods: {
        // 业务1
        ponIn(){
            this.SelectedOne=false;
            this.SelectedTwo=true;
        },
        // 业务2
        ponOut(){
            this.SelectedOne=true;
            this.SelectedTwo=false;
        },
}

2.3 css

.market-switch{
    display: inline-block;
    width: 65px;
    margin-left: 20px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}
.market-switch:last-child {
   margin-left: 0px;
}


//鼠标经过-切换 
.market-switch:hover{
    background-color: rgb(225, 240, 255);
}