Vue-三种方式实现tab切换

一、通过V-show/V-if实现<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document&lt

火腿肠烧烤大赛冠军

3063人浏览 · 2020-10-29 09:26:53

火腿肠烧烤大赛冠军 · 2020-10-29 09:26:53 发布

一、通过V-show/V-if实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            background: red;
        }

        .tabs {
            background-color: blue;
            width: 200px;
            height: 20px;
            font: 0;
            padding: 0;
        }

        .li-tab {
            width: 30%;
            height: 100%;
            display: inline-block;
            text-align: center;
        }

        .divTab {
            width: 200px;
            height: 300px;
        }
    </style>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul class="tabs">
            <li class="li-tab" v-for="(item,index) in tabsParam" @click="toggleTabs(index)"
                :class="{active:index == nowIndex}" :key="index">{{item}}</li>
        </ul>
        <div class="divTab" v-show="nowIndex ===0">我是栏目1</div>
        <div class="divTab" v-show="nowIndex ===1">我是栏目2</div>
        <div class="divTab" v-show="nowIndex ===2">我是栏目3</div>
    </div>
</body>

</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            tabsParam: ['1', '2', '3'],
            nowIndex: 0
        },
        methods: {
            toggleTabs: function (index) {
                this.nowIndex = index;
            }
        }
    })
</script>

直接运行即可
效果如图
在这里插入图片描述

二、利用组件实现

利用is属性实现
app.vue

<template>
  <div id="app">
    <div>lueluelue</div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <!-- void0取消默认事件一个原理 -->
    <a href="javascript:void(0);" @click="toggleTabs(first)">{{ first }}</a
    >&nbsp;&nbsp;&nbsp;
    <a href="javascript:void(0);" @click="toggleTabs(second)">{{ second }}</a
    >&nbsp;&nbsp;&nbsp;
    <a href="javascript:void(0);" @click="toggleTabs(third)">{{ third }}</a>

    <!-- 利用is特性实现动态绑定 keep-alive实现保存在内存可以重新渲染 -->
    <first :is="currentView" keep-alive></first>
  </div>
</template>

<script>
import first from "./components/first";
import second from "./components/second";
import third from "./components/third";

export default {
  name: "App",
  data() {
    return {
      first: "first",
      second: "second",
      third: "third",
      currentView: "second",
    };
  },
  components: {
    first,
    second,
    third,
  },
  methods: {
    toggleTabs(tabText) {
      this.currentView = tabText;
    },
  },
};
</script>

组件

<template>
  <div>我是第一张</div>
</template>

后两个同理

实现效果在这里插入图片描述

三、利用子路由切换

app.vue

<template>
  <div class="box">
    <!-- nav标题，路由指向 -->
    <div class="left">
      <router-link
        :to="item.src"
        v-for="(item, index) in navData"
        :key="index"
        >{{ item.title }}</router-link
      >
    </div>
    <div class="right">
      <!-- 路由跳转的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  name: "Index",
  data() {
    return {
      navData: [
        {
          title: "title一",
          src: "/",
        },
        {
          title: "title二",
          src: "/nav2",
        },
        {
          title: "title三",
          src: "/nav3",
        },
      ],
    };
  },
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  background: rgba(0, 0, 0, 0.8);
}
.left {
  width: 200px;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  padding: 20px;
}
.left a {
  text-decoration: none;
  display: block;
  margin-top: 20px;
  width: 100%;
  color: #fff;
}
.right {
  flex: 1;
  padding: 20px;
  color: #fff;
}
</style>

子路由

<template>
  <div>这是nav1</div>
</template>
<script>
export default {
  name: "nav1",
};
</script>

其他同理
router.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from './App.vue'
import nav1 from './pages/nav1.vue'
import nav2 from './pages/nav2.vue'
import nav3 from './pages/nav3.vue'
// vue加载插件
Vue.use(Router);

export default new Router({
    // mode: 'history',
    // base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            //name: 'Index',
            component: Index,
            children: [
                {
                    path: '',
                    name: 'nav1',
                    component: nav1
                },
                {
                    path: 'nav2',
                    name: 'nav2',
                    component: nav2
                },
                {
                    path: 'nav3',
                    name: 'nav3',
                    component: nav3
                }
            ]
        }
    ]
})

实现效果如图
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^