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'

}

},

}