VUE二级导航遍历数据

最新推荐文章于 2023-07-28 21:28:58 发布

原创

最新推荐文章于 2023-07-28 21:28:58 发布 · 727 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何在Vue中处理二级导航的数据遍历，包括在父组件和子组件中进行操作的步骤，以及安装和引入所需插件的方法，提供了完整的代码示例和最终实现效果。

二级导航遍历数据

先在小黑框下载 axios插件
使用npm:

$ npm install axios

在下载vant插件
通过 npm 安装

npm i vant -S

必须在main.js中引入vant和axios插件
完整引入代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

Vue.config.productionTip = false
Vue.prototype.$axios = axios;

new Vue({
   
   
  router,
  store,
  render: h => h(App)
}).$mount('#app')

父组件template中

 <div class="navs">
      <van-tabs color="red" @click="selNavOne" v-model="nav1Active">
        <van-tab v-for="(nav,index ) in navs" :key="nav.cid" :name="index" :title="nav.cname">
          <!-- 点击全部时展示 -->
          <div v-if="nav.cid==0">
            <List :list="goodList"></List>
          </div>

          <van-tabs color="red" v-if="nav.cid!=0" @click=