vue一级、二级菜单点击导航栏切换

最新推荐文章于 2024-03-21 10:36:21 发布

VIP文章不瞅不啾子

最新推荐文章于 2024-03-21 10:36:21 发布

阅读量4.9k

点赞数

文章标签： 1024程序员节 vue javascript vue.js

本文链接：https://blog.csdn.net/weixin_46871290/article/details/127496983

版权

一.一级菜单

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

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

 <v-tabs

        v-model="tab"

    >

        <v-tabs-slider color="yellow"></v-tabs-slider>     //标题下黄线

        <v-tab

        v-for="item in items"

        :key="item.pname"

        >

        {
  { item.pname }}                                               //标题

        </v-tab>

    </v-tabs>

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

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

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

3.标题下内容

    <v-tabs-items v-model="tab">
         <v-tab-item v-for="item in items" :key="item.pname">
        <v-card 
         v-for="newss in item.news"
        :key="newss.title"
        @click="godetail()"
         elevation="2"
         outlined
         shaped
         tile
         flat>
          <v-list-item three-line>
      <v-list-item-content>

        <!-- <v-list-item-title 
            class="text-h5 mb-1"
        >
          {
  {newss.title}}
        </v-list-item-title> -->
        <v-list-item-subtitle>{
  {newss.title}}</v-list-item-subtitle>
      </v-list-item-content>

      <v-list-item-avatar
        tile
        size="80"
        color="grey"
      ><img :src="newss.url"></v-list-item-avatar>
    </v-list-item>

    <v-card-actions>
      <v-btn
        outl