<!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>

 

<!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> ...

  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. python接口自动化（二十）--token登录（详解）

    简介 为了验证用户登录情况以及减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮.有些登录不是用 cookie 来验证的,是用 token 参数来判断是否登录.token 传参有两种一种是放在请 ...

  2. Elasticsearch【快速入门】

    前言:毕设项目还要求加了这个做大数据搜索,正好自己也比较感兴趣,就一起来学习学习吧! Elasticsearch 简介 Elasticsearch 是一个分布式.RESTful 风格的搜索和数据分析引 ...

  3. Linux挖矿病毒 khugepageds详细解决步骤

    一.背景 最近公司一台虚拟机被攻击,其中一种挖矿病毒.会伪CPU数.即如果用top命令只能看到一个cpu.并且负载不高.实际上整个负载300%以上,及时定时任务关掉也不起作用. 二.言归正传开始干掉这 ...

  4. Android版数据结构与算法(一):基础简介

    版权声明:本文出自汪磊的博客,未经作者允许禁止转载. 一.前言 项目进入收尾阶段,忙忙碌碌将近一个多月吧,还好,不算太难,就是麻烦点. 数据结构与算法这个系列早就想写了,一是梳理总结,顺便逼迫自己把一 ...

  5. 搜狗输入法与VS快捷键有冲突_处理办法

    前言:搜狗输入法是大家常用的文字输入工具,但是在开启输入法的时候,VS的一些快捷键无法正常使用,如智能提示快捷键:Ctrl+.,这就非常尴尬了,除非把输入法切换成英文或者卸载搜狗改别的输入法,一个是切 ...

  6. DSAPI中TCP、UDP、HTTP的选择

    在DSAPI中,网络通讯主要有以下几种:1 [TCP] TCP服务端 TCP客户端 2 [UDP] UDP服务端 UDP客户端 UDP指令版服务端 UDP指令版客户端 3 [HTTP] HTTP服务端 ...

  7. bat 实现主机hostname的修改

    主机实现hostname的修改原理: 修改注册表中的值: hklm\SYSTEM\CurrentControlSet\Control\ComputerName\ComputerName 下的 Comp ...

  8. Windows-删除Windows Server backup卷影副本

    现有环境中有一台Windows Server做过定期备份计划,时间太久未做清理操作,收到磁盘报警邮件后需要及时释放该空间,具体操作步骤如下: 当前备份计划信息如下: 清理步骤如下: 1.以管理身份运行 ...

  9. Linux文件系统类型和区别

    文件系统EXT3,EXT4和XFS的区别: 1. EXT3 (1)最多只能支持32TB的文件系统和2TB的文件,实际只能容纳2TB的文件系统和16GB的文件 (2)Ext3目前只支持32000个子目录 ...

  10. python基础-函数(9)

    一.函数的介绍 如果在开发程序时,需要某块代码多次,但是为了提高编写的效率以及代码的重用,所以把具有独立功能的代码块组织为一个小模块,这就是函数 函数的语法格式: def 函数名(): 函数的功能代码 ...