zoukankan      html  css  js  c++  java
  • vue tab切换

    <!-- 交互的逻辑
    1==》如何实现 点击当前的那个菜单 给被点击的元素添加样似
    @click="getclcik(index)" 记录当前被点击的元素的下标
    :class="{active:cur==index} 如果匹配成功,则给这个元素添加一个类active

    2==》如何只显示 点击下标与之对应的内容
    v-show="cur==index" 对应匹配

    原地址==》https://www.jianshu.com/p/52441745d769

    <style>
                ul li {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                }
    
                #app {
                     600px;
                    height: 400px;
                    margin: 0 auto;
                    border: 1px solid #ccc;
                }
    
                .tab-tilte {
                     90%;
                }
    
                .tab-tilte li {
                    float: left;
                     25%;
                    padding: 10px 0;
                    text-align: center;
                    background-color: #f4f4f4;
                    cursor: pointer;
                }
    
                /* 点击对应的标题添加对应的背景颜色 */
                .tab-tilte .active {
                    background-color: #09f;
                    color: #fff;
                }
    
                .tab-content div {
                    float: left;
                     25%;
                    line-height: 100px;
                    text-align: center;
                }
            </style>
            <div id="app">
                <!-- 推荐这种写法-->
                <ul class="tab-tilte">
                    <li v-for="(title,index) in tabTitle" @click="getclcik(index)" :class="{active:cur==index}">{{title}}</li>
                </ul>
                
                <div class="tab-content">
                    <div v-for="(m,index) in tabMain" v-show="cur==index">{{m}}</div>
                </div>
            </div>
        var app = new Vue({
                el: '#app',
                data: {
                    tabTitle: ['标题一', '标题二', '标题三', '标题四'],
                    tabMain: ['内容一', '内容二', '内容三', '内容四'],
                    cur: 0 //默认选中第一个tab
                },
                methods:{
                  getclcik(value){
                     this.cur=value; 
                  }    
                }
            })

  • 相关阅读:
    get和post
    java学习day34-Cookie技术
    java学习day33-Maven-相关
    在Linux设置完共享文件夹后无法显示Windows里的文件
    Tomcat-把tomcat的端口号从8080修改为80
    是否忘记向源中添加“#include“StdAfx.h””
    php-fpm配置文件详解
    Web安全常见漏洞修复建议
    blog个性化设置
    使用 notepad++ 编辑器在行首、行尾添加字符
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/11816192.html
Copyright © 2011-2022 走看看