Vue常见的实现tab切换的两种方法

方法一：事件绑定+属性绑定

效果图

完整代码

方法二：属性绑定+ 动态组件 component标签

效果图

完整代码

方法一：事件绑定+属性绑定

效果图

完整代码


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tabtitle>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        h2{
            width: 500px;
            height: 400px;
            background: #9fe4d9;
            text-align: center;
            line-height: 400px;
            display: none;
        }
        #app .kk{
            width: 500px;
            height: 50px;
            display: flex;
            justify-content: space-between;
            
        }
        #app{
            
            width: 500px;
            margin: 50px auto;
        }
        span{
            flex: 1;
            text-align: center;
            line-height: 50px;
            background: #ccc;
        }
        .on{
            background: pink;
        }
        #app .onn{
            display: block;
        }
        
    style>
head>
<body>
    <div id="app">
        <div class="kk">
        <span :class =" n==1 && 'on'" @click.self="n=1">1span>
        <span :class =" n==2 && 'on'" @click.self="n=2">2span>
        <span :class =" n==3 && 'on'" @click.self="n=3">3span>
        <span :class =" n==4 && 'on'" @click.self="n=4">4span>
        <span :class =" n==5 && 'on'" @click.self="n=5">5span>
        div>
        
        <h2 :class =" n==1 && 'onn'">1h2>
        <h2 :class =" n==2 && 'onn'">2h2>
        <h2 :class =" n==3 && 'onn'">3h2>
        <h2 :class =" n==4 && 'onn'">4h2>
        <h2 :class =" n==5 && 'onn'">5h2>
 
    div>
body>
html>
<script type="module">
import {createApp} from './js/vue.esm-browser.js';
createApp({
    data() {
        return {
           n:1
        }  
    },
    methods:{
         
       },
}).mount('#app')
script>

方法二：属性绑定+ 动态组件 component标签

该组件具有一个is属性，is属性的值是要渲染组件的名字，即为is属性的值是哪一个组件名，

component 标签就会渲染哪一个组件

缺点：component 可以动态渲染组件的内容，但是每一个切换，都会重新渲染组件内容，降低渲染效率

使用keep-alive 标签(组件)，可以缓存曾经渲染过的组件，从而提高渲染效率

效果图

完整代码


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态组件title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wp{
            width: 440px;
            height: 30px;
            margin: 20px auto;
            display: flex;
            background: #f0f0f0;
        }
        .wp span{
            flex: 1;
            height: 30px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
        .wp span.on{
            background: pink;
            color: #fff;
        }
        h1{
            width: 440px;
            margin: 0 auto;
 
        }
    style>
head>
<body>
    <div id="app">
        <div class="wp">
            <span :class="num==1&&'on'" @click="num=1">水浒传span>
            <span :class="num==2&&'on'" @click="num=2">红楼梦span>
            <span :class="num==3&&'on'" @click="num=3">西游记span>
            <span :class="num==4&&'on'" @click="num=4">三国演义span>
        div>
 
        
         <keep-alive>
        <component :is="'comp'+num">component>
         keep-alive>
    div>
body>
html>
<script type="module">
 import { createApp } from './js/vue.esm-browser.js';     
 let comp1={
    template:'水浒传
'
 }
 let comp2={
    template:'红楼梦
'
 }
 let comp3={
    template:`
    西游记
    {{n}}
    
    `,
    data() {
        return {
            n:100,
        }
    },
 }
 let comp4={
    template:'三国演义
'
 }
 let aa = {
    template:'金瓶梅
'
 }
 createApp({
    data() {
        return {
            num:1,
 
        }
    },
 
    components:{
        comp1,comp2,comp3,comp4,aa
    }
 }).mount('#app')
script>

相关阅读:
unity学习 -- 游戏资源导入
【无标题】
谈谈JS二进制：File、Blob、FileReader、ArrayBuffer、Base64
基于YOLOv8模型的条形码二维码检测系统（PyTorch+Pyside6+YOLOv8模型）
HTTP协议发展史
前后端接口设计与配置中心系统＜二十九＞-------HiAbility SDK开发1【基础推送能力集成、OEM厂商推送能力集成】
【教程】MySQL数据库学习笔记（五）——约束（持续更新）
如何对wps流程图进行重命名，如何对wps流程图进行重命名，wps进入修订模式，wps怎么在尾部加公式标号英文论文格式要求及字体大小
VMware使用Window、WinXP等虚拟机上不了网的解决办法（管用）
Vue的三种安装方式

原文地址：https://blog.csdn.net/qq_52799985/article/details/134634411