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

    目录

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

    效果图

     完整代码

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

    效果图

    完整代码 

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

    效果图

     完整代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>tabtitle>
    7.     <style>
    8.         *{
    9.             margin: 0;
    10.             padding: 0;
    11.         }
    12.         h2{
    13.             width: 500px;
    14.             height: 400px;
    15.             background: #9fe4d9;
    16.             text-align: center;
    17.             line-height: 400px;
    18.             display: none;
    19.         }
    20.         #app .kk{
    21.             width: 500px;
    22.             height: 50px;
    23.             display: flex;
    24.             justify-content: space-between;
    25.             
    26.         }
    27.         #app{
    28.             
    29.             width: 500px;
    30.             margin: 50px auto;
    31.         }
    32.         span{
    33.             flex: 1;
    34.             text-align: center;
    35.             line-height: 50px;
    36.             background: #ccc;
    37.         }
    38.         .on{
    39.             background: pink;
    40.         }
    41.         #app .onn{
    42.             display: block;
    43.         }
    44.         
    45.     style>
    46. head>
    47. <body>
    48.     <div id="app">
    49.         <div class="kk">
    50.         <span :class =" n==1 && 'on'" @click.self="n=1">1span>
    51.         <span :class =" n==2 && 'on'" @click.self="n=2">2span>
    52.         <span :class =" n==3 && 'on'" @click.self="n=3">3span>
    53.         <span :class =" n==4 && 'on'" @click.self="n=4">4span>
    54.         <span :class =" n==5 && 'on'" @click.self="n=5">5span>
    55.         div>
    56.         
    57.         <h2 :class =" n==1 && 'onn'">1h2>
    58.         <h2 :class =" n==2 && 'onn'">2h2>
    59.         <h2 :class =" n==3 && 'onn'">3h2>
    60.         <h2 :class =" n==4 && 'onn'">4h2>
    61.         <h2 :class =" n==5 && 'onn'">5h2>
    62.  
    63.     div>
    64. body>
    65. html>
    66. <script type="module">
    67. import {createApp} from './js/vue.esm-browser.js';
    68. createApp({
    69.     data() {
    70.         return {
    71.            n:1
    72.         }  
    73.     },
    74.     methods:{
    75.          
    76.        },
    77. }).mount('#app')
    78. script>

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

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

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

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

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

    效果图

    完整代码 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>动态组件title>
    7.     <style>
    8.         *{
    9.             margin: 0;
    10.             padding: 0;
    11.         }
    12.         .wp{
    13.             width: 440px;
    14.             height: 30px;
    15.             margin: 20px auto;
    16.             display: flex;
    17.             background: #f0f0f0;
    18.         }
    19.         .wp span{
    20.             flex: 1;
    21.             height: 30px;
    22.             text-align: center;
    23.             line-height: 30px;
    24.             cursor: pointer;
    25.         }
    26.         .wp span.on{
    27.             background: pink;
    28.             color: #fff;
    29.         }
    30.         h1{
    31.             width: 440px;
    32.             margin: 0 auto;
    33.  
    34.         }
    35.     style>
    36. head>
    37. <body>
    38.     <div id="app">
    39.         <div class="wp">
    40.             <span :class="num==1&&'on'" @click="num=1">水浒传span>
    41.             <span :class="num==2&&'on'" @click="num=2">红楼梦span>
    42.             <span :class="num==3&&'on'" @click="num=3">西游记span>
    43.             <span :class="num==4&&'on'" @click="num=4">三国演义span>
    44.         div>
    45.  
    46.         
    47.          <keep-alive>
    48.         <component :is="'comp'+num">component>
    49.          keep-alive>
    50.     div>
    51. body>
    52. html>
    53. <script type="module">
    54.  import { createApp } from './js/vue.esm-browser.js';     
    55.  let comp1={
    56.     template:'
      水浒传
      '
    57.  }
    58.  let comp2={
    59.     template:'
      红楼梦
      '
    60.  }
    61.  let comp3={
    62.     template:`
    63.     
      西游记
    64.     
      {{n}}
    65.     
    66.     `,
    67.     data() {
    68.         return {
    69.             n:100,
    70.         }
    71.     },
    72.  }
    73.  let comp4={
    74.     template:'
      三国演义
      '
    75.  }
    76.  let aa = {
    77.     template:'
      金瓶梅
      '
    78.  }
    79.  createApp({
    80.     data() {
    81.         return {
    82.             num:1,
    83.  
    84.         }
    85.     },
    86.  
    87.     components:{
    88.         comp1,comp2,comp3,comp4,aa
    89.     }
    90.  }).mount('#app')
    91. script>

  • 相关阅读:
    原生IP是什么？如何测试代理是不是原生IP?
    Nginx实现负载均衡
    Python2.7 pip安装tensorflow-1.15
    C++PrimerPlus 第六章 分支语句和逻辑运算符（编程练习）
    Redis基础知识：redis有16个数据库、redis是单线程的！
    java基于Springboot+vue 音乐播放器论坛交流管理系统 element 前后端分离
    二、HTTP协议基础
    经典OJ题：随机链表的复制
    深眸科技自研轻辙视觉引擎，以AI机器视觉赋能杆号牌识别与分拣
    智能生活 App SDK 开发入门教程【内附代码段 】
  • 原文地址：https://blog.csdn.net/qq_52799985/article/details/134634411