vue中的tab栏切换内容变换

时间：2023-02-24 08:13:16
<!DOCTYPE html>

<html lang="cn-zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

         ul li {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        #app {

            width: 600px;

            height: 400px;

            margin: 0 auto;

            border: 1px solid #ccc;

        }

        .tab-tilte{

            width: 90%;

        }

        .tab-tilte li{

            float: left;

            width: 50%;

            height: 44px;

            line-height: 44px;

            text-align: center;

            background-color:#fff;

            cursor: pointer;

        }

        /* 点击对应的标题添加对应的背景颜色 */

        .tab-tilte .active{

            background:url('./a.png') no-repeat;

            /* 地址是背景图标 */

            color: #fff;

            background-size: 100% 44px;

        }

        .tab-tilte .active1{

            background: url('./b.png') no-repeat;

            /* 背景图标 */

            color: #fff;

            background-size: 100% 44px ;

        }

        .tab-content div{

            float: left;

            width: 25%;

            line-height: 100px;

            text-align: center;

        }

    </style>

</head>

<body>

        <div id="app">

            <ul class="tab-tilte">

                <li @click="cur=0" :class="{active:cur==0}">1.验证手机</li>

                <li @click="cur=1" :class="{active1:cur==1}">2.企业认证</li>

            </ul>

            <div class="tab-content">

                <div v-show="cur==0">内容一</div>

                <div v-show="cur==1">内容二</div>

            </div>

        </div>

    <script src="./vue.js"></script>

    <script>

        var app = new Vue({

            el: "#app",

            data: {

                cur:0 //默认选中第一个tab

            },

        }); 

    </script>

</body>

</html>

vue中的tab栏切换内容变换 vue中的tab栏切换内容变换

<!DOCTYPE html>
<html lang="cn-zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul li {
margin: ;
padding: ;
list-style: none;
}
#app {
width: 600px;
height: 400px;
margin: auto;
border: 1px solid #ccc;
}
.tab-tilte{
width: 90%;
}
.tab-tilte li{
float: left;
width: 50%;
height: 44px;
line-height: 44px;
text-align: center;
background-color:#fff;
cursor: pointer;
}
/* 点击对应的标题添加对应的背景颜色 */
.tab-tilte .active{
background:url('./a.png') no-repeat;
/* 地址是背景图标 */
color: #fff;
background-size: 100% 44px;
}
.tab-tilte .active1{
background: url('./b.png') no-repeat;
/* 背景图标 */
color: #fff;
background-size: 100% 44px ;
}
.tab-content div{
float: left;
width: 25%;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<ul class="tab-tilte">
<li @click="cur=0" :class="{active:cur==0}">1.验证手机</li>
<li @click="cur=1" :class="{active1:cur==1}">2.企业认证</li>
</ul>
<div class="tab-content">
<div v-show="cur==0">内容一</div>
<div v-show="cur==1">内容二</div>
</div>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
cur: //默认选中第一个tab
},
});
 
 
</script>
</body>
</html>

vue中的tab栏切换内容变换的更多相关文章

  1. 使用vue封装一个tab栏切换的左侧导航栏的公共组件

     首先看最终效果图: 1.compent文件夹里添加tab文件夹,里面创建index.vue index.js index.css index.vue内的template部份代码如下:(最新更正:代码 ...

  2. Vue项目中实现tab栏和步骤条的数据联动

    也就是tab栏切换步骤条随之变化 <template>   <div>     <!-- 面包屑导航  -->     <el-breadcrumb sepa ...

  3. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  4. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  5. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li&gt ...

  6. tab栏切换制作

    tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...

  7. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

  8. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

  9. tab栏切换，内容为不断实时刷新数据的vue实现方法

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax ...

随机推荐

  1. nexus 社区版3&period;0&period;2部署、访问

    下载nexus社区办(oss): https://www.sonatype.com/download-oss-sonatype 目前最新版本  nexus-3.0.2-02-win64.zip nex ...

  2. mysql出现启动不了问题

    查询日志后是‘ Fatal error: Can't open and lock privilege tables: Table 'mysql.host' doesn't exist’此错误(less ...

  3. Biological Filtration

    http://www.fishyou.com/filtration-biological.php Biological Filtration Biological filtration is the ...

  4. 基于安卓高仿how-old&period;net实现人脸识别估算年龄与性别

    前几段微软推出的大数据人脸识别年龄应用how-old.net在微博火了一把,它可以通过照片快速获得照片上人物的年龄,系统会对瞳孔.眼角.鼻子等27个“面部地标点"展开分析,进而得出你的“颜龄 ...

  5. 找出链表中倒数第 k 个结点

    /* 题目:输入一个单向链表,输出该链表中倒数第 k 个结点.链表的倒数第 0 个结点为链表 的尾指针. 链表结点定义如下: struct node { int data; struct node * ...

  6. 1056&colon; &lbrack;HAOI2008&rsqb;排名系统 - BZOJ

    Description 排名系统通常要应付三种请求:上传一条新的得分记录.查询某个玩家的当前排名以及返回某个区段内的排名记录.当某个玩家上传自己最新的得分记录时,他原有的得分记录会被删除.为了减轻服务 ...

  7. java中得到图片的宽度 高度：

    java中得到图片的宽度 高度:BufferedImage srcImage = null;srcImage = ImageIO.read(new File(srcImagePath));int sr ...

  8. 将 Hexo 个人博客同时部署到 GitHub 和 Coding 上

    一.将个人博客托管到 GitHub 上 关于如何快速搭建自己的个人博客,如何完善自己的个人博客,什么是 GitHub ,如何将自己的博客代码托管到 GitHub 上面等等问题,我之前写过三篇文章已经做 ...

  9. 使用keil5&comma;加断点调试后，停止运行的问题

    加上断点调试,执行到断点的时就出现程序停止运行的提示. 原因:是工程路径存放太深.

  10. PhoenixFD插件流体模拟——UI布局【Simulation】详解

    前言 之前使用RealFlow做流体模拟,但是总得和3ds导来导去,略显麻烦,特意学习PhoenixFD插件,直接在3ds中进行流体模拟.若读者有更好的流体模拟方法,欢迎在评论区交流. 原文地址:ht ...

相关文章