vue-动态导航

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'

}

},

}