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'
}
},
}