vue/uniapp 用键值对的形式动态控制class，事先导航栏效果

 效果：

 

 代码：

 

效果：

 

 代码： 

 

<template>
    <view class="content">
                <u-navbar :is-back="false" title="" class="title">
                    <view
                    :class="{ 'title-active': Number(index) ===  Number(currentTitle) }"
                    @tap="topTitle(index)"
                    :index="index"
                    v-for="item, index in titleList"
                    :key="index">
                        <text>{{ item.title }}</text>
                    </view>
                </u-navbar>
    </view>
</template>

<script>
export default {
    data() {
        return {
            currentTitle: 0,
            titleList: [
                { title: '共享文库' },
                { title: '共享课程' },
                { title: '电子教材' }
            ]
        };
    },
    onLoad() {},
    methods: {
        topTitle (index) {
            this.currentTitle = index
            console.log(index)
        }
    }
};
</script>

<style>
.content {
    text-align: center;
    height: 400upx;
    width: 100%;
    margin-top: 200upx;
}
    .title-active {
        /* font-size: 50px; */
        color: red;
    }
    /deep/ .u-slot-content {
        justify-content: space-around;
        font-size: 16px;
    }
</style>