4***@qq.com
4***@qq.com
  • 发布:2024-05-12 12:49
  • 更新:2024-05-12 12:49
  • 阅读:155

在做选项卡上加与不加:class="{ 'btna':count === index }" ,运行结果都一样,是什么总是没弄好

分类:HBuilderX

这是在<view v-for="(item,index) in items" :key="index">{{ item }}</view>里没加上:class="{ 'btna':count === index },加上也一样情况,哪里没弄好?
<template>
<view class="home">
<view class="courseIntroduce_box">
<view class="courseIntroduce_des">
<view class="courseIntroduce_info">{{ introduce }}</view>
</view>
<courseIntroduceData :msg="introduceList"/>
<view class="question_line"></view>
<view class="courseIntroduce_tab_box">
<view class="courseIntroduce_tab_nav">
<view v-for="(item,index) in items" :key="index">{{ item }}</view>
</view>
<view class="courseIntroduce_tab_con"></view>
</view>
</view>
</view>
</template>

<script>
import courseIntroduceData from "../../../components/courseIntroduce-data/courseIntroduce-data.vue"
export default {
data() {
return {
introduce:"",
introduceList:[],
items:["课程章节","课程介绍"],
count:0
}
},
components:{
courseIntroduceData
},
onLoad(options) {
uni.request({

            url:"https://www.itbaizhan.cn/api/course/detail",  
            data:{  
                id:options.id,  
                course:options.course  
            },  
            success: (res) => {  

                this.introduce = res.data.data.introduce  
                this.introduceList = res.data.data.introduceList  
            }  
        })  
    },  
    methods: {  

            }     

}  

</script>

<style lang="scss">
.courseIntroduce_box {
display: flex;
box-sizing: box;
flex-direction: column;
margin-bottom: 90px;

    .courseIntroduce_des {  
        display: flex;  
        box-sizing: border-box;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
        width: 100%;  
        background-color: #0c9c8f;  
        padding: 0 10px 15px;  
        overflow: hidden;  

        .courseIntroduce_info {  
            display: flex;  
            box-sizing: box;  
            width: 100%;  
            color: #fff;  
            font-size: 16px;  
            line-height: 24px;  
        }  
    }  

    .courseIntroduce_tab_box {  
        display: flex;  
        box-sizing: border-box;  
        flex-direction: column;  

        .courseIntroduce_tab_nav {  
            display: flex;  
            box-sizing: border-box;  
            flex-direction: row;  
            background-color: #fff;  
            border-bottom: 1px solid #e4e4e4;  
            margin-bottom: 20px;  

            view {  
                height: 50px;  
                line-height: 50px;  
                font-size: 16px;  
                flex-grow: 1;  
                text-align: center;  
                background-color: #fff;  
            }  

        }  
        .discount_info {  
            display: nome;  
        }  

        .btna {  
            display: flex;  
            box-sizing: border-box;  
            justify-content: center;  
            color: $zhu-color;  
            position: relative;  
        }  
        .btna::after {  
            content: '';  
            width: 40px;  
            height: 3px;  
            background-color: $zhu-color;  
            position: absolute;  
            bottom: 0;  
            left: 50%;  
            margin-left: -20px;  
        }  
        .dis {  
                display: block;  
        }  
    }  
}  

</style>

2024-05-12 12:49 负责人:无 分享
已邀请:

要回复问题请先登录注册