这是在<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>