点击导航切换不同内容
<template>
<view class="content">
<view class="nave">
<view class="item" :class="navIndex==index?'acvite':''" v-for="(item,index) in arr" @click="click(index)">{{item.title}}</view>
</view>
<view class="sz" v-if="navIndex==0">学习内容</view>
<view class="sz" v-if="navIndex==1">教程内容</view>
<view class="sz" v-if="navIndex==2">规范内容</view>
<view class="sz" v-if="navIndex==3">组件内容</view>
</view>
</template>
<script>
export default {
data() {
return {
arr:[
{id:1,title:"学习"},
{id:2,title:"教程"},
{id:3,title:"规范"},
{id:4,title:"组件"}
],
navIndex:0
};
},
methods:{
click(index){
this.navIndex=index
console.log(index)
}
}
}
</script>
<style lang="scss">
.nave{
height: 90rpx;
display: flex;
justify-content: space-around;
align-items: center;
.item{
background: gray;
flex: 1;
text-align: center;
&.acvite{
color: #fff;
background: green;
}
}
}
.sz{
height: 400rpx;
width: 100%;
background: green;
text-align: center;
line-height: 400rpx;
}
</style>