一.一级菜单

1.实际效果,点击标题切换内容

 2.用了vertify样式,标题pname从后端传数据

这里讲解一个原理,具体数据格式请看第四条的数据初始化

item是固定写法,items指取有数据的大数组,item in items指items里的一条数据第一层{},

然后取item.pname把导航栏标题显示出来

3.标题下内容

v-for就像java里的二层for循环一样,要取第二层news里的内容,需要先循环第一层,于是就要把item in items先写在第一层,这样就取到了item第一个括号,接着取news里的内容,写第二个v-for,上面的v-card是一个样式,把内容放到一个卡片里,接下来 v-for="newss in item.news"

item是第一层,包含news,news是第二层括号,简单讲也就是数组里的数组,大数组包含多个标题,小数组则是每个标题的对应内容,这里的newss是随便取得名字,指代的是news数组里的每一个数组

这里的key大概是主键的意思

有了newss之后,就可以取每一个小数组里的每一个属性的值

只要在v-card包围内,都可以用{{newss.title}}{{newss.tags}}取值

其中@click点击事件的作用是跳转新闻资讯的具体内容,与导航栏切换无关

4.初始化数据

在data里需要初始化tab,item

tab: null,

tab用来导航切换定位

items作为大数组,里面的数据格式是这样的

二.二级菜单

二级菜单比一级菜单多了一个侧边栏,其原理是没什么区别的

这里用的依旧是vertify框架

1.一级副标题

 依旧是显示专项、朋友圈、收藏等功能,依旧是依靠tab来定位

2.二级菜单(侧边栏)及其内容(海报图片)

二级菜单需要一个subtab来定位,需要后端传数据的时候加上,不过赋个空值就可以了

这里没有数据格式,因为是从后端取得,我有空调一下接口再放到下面第三点了

整个数据放在一个大数组里,第一级是标题,第二级是标题下的各个二级标题,第三级是二级标题下的各个海报内容,所以要取到各个海报,像三层for循环一样,用v-for一级一级的取值

(1)第一级标题

v-model=tab定位第一级

v-for=item in items :key=item.pname

item代指第一层

(2)第二级标题

v-model=item.subtab 定位第二级

                    {{ item.cname }}  

取第二级所有二级标题在侧边栏展示

item in 第一层的item,此时item指代第二层

(3)循环第二级里的内容

v-model=item.subtab

v-for=item in  item.secondCategory :key=item.cname

定位第二级

v-for=card in item.poster

循环取第二级标题里的各个内容

图片属性:src=card.url

取名称{{card.title}}

3.数据格式

tab: null,

items: [],