div部分：
<!--//判断 active === item 相等的时候 用navigationA 样式 否则 就用 navigation样式-->
<view style="width: 90%;height: 100rpx;margin: 20rpx auto;text-align: center;line-height: 100rpx;">
<view v-for="item in navarr" :class = "active === item ? 'navigationA' : 'navigation' " style="" @click="navclick(item)">
{{item}}
</view>
</view>
<!-- 下面是内容区域 -->
<view style='width: 90%;height: 1000rpx;margin: 20rpx auto;background: red;'>
<!--判断 type = '' 的时候显示 -->
<view v-if="type === 'A'">
<!-- 新品推荐 -->
</view v-else-if="type === 'B'">
<!-- 资源分类 -->
<view>
</view v-else-if="type === 'c'">
<!-- 全部资源 -->
<view>
</view>
</view>
data部分：
active:'新品推荐',
type: 'A',
navarr:[
'新品推荐',
'资源分类',
'全部资源', ]
methods:{
navclick(item){
let me =this
//将点击的元素的索引赋值给变量
me.active = item
if (item==='新品推荐') {
me.type='A'}
else if (item==='资源分类') {
me.type='B'
}
else if (item==='全部资源') {
me.type='c'
}
},
}