<!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. 基于ko-easyui实现的PC前端模板功能完善

    上一篇博客我向大家介绍了基于ko-easyui实现的开发模板,博客地址:https://www.cnblogs.com/cqhaibin/p/9825465.html#4095185.但在还遗留三个问 ...

  2. ssm客户管理系统的设计与实现

    ssm客户管理系统 注意:系统是在实现我的上一篇文章 https://www.cnblogs.com/peter-hao/p/ssm.html的基础上开发 1     需求 1.1   添加客户 客户 ...

  3. SQL优化指南

    慢查询日志 开启撒网模式 开启了MySQL慢查询日志之后,MySQL会自动将执行时间超过指定秒数的SQL统统记录下来,这对于搜罗线上慢SQL有很大的帮助. SHOW VARIABLES LIKE 's ...

  4. C#开发APP，ToolBar控件在Smobiler中的使用方式【附案例源码】——Smobiler移动开发平台

    控件说明 底部工具栏控件. 效果演示 其他效果 该界面为仿淘宝UI制作的一个简单的UI模板,源码获取方式请拉至文章末尾. 特色属性 属性 属性说明 Direction(相对布局) 容器主轴方向. Fl ...

  5. DSAPI 网页获取本地程序登陆用户

    这是一个非常简单的示例,在网页或其他平台获取程序中已经登陆的用户,当然也可以是其他信息. 源码 Imports DSAPI.网络.HTTP监听_DSWebAPI Public Class Form1 ...

  6. d3实现家族树

      1.  jQuery和CSS3支持移动手机的DOM元素移动和缩放插件:panzoom   2.拖动:jqueryUI-Draggable.touchpunch   3.图表:echart.heig ...

  7. 安卓开发笔记（二十二）：读取本地（内置）html文件并实现和Javascript交互

    实际上我们通常是使用WebView控件对本地html进行读取,这样就可以体会类似web app和安卓原生混合开发的乐趣了.在读取本地html并展示在前台的时候,并不需要在Androidmenifast ...

  8. 20180726 - Windows 10 Pro 下远程桌面连接提示“出现身份验证错误”

    问题:Windows 10 Pro 下远程桌面连接提示“出现身份验证错误” [Window Title]远程桌面连接 [Content]出现身份验证错误.要求的函数不受支持 远程计算机: 192.16 ...

  9. webpack打包nodejs项目（前端代码）

    PS.若本文没有帮到你可以看看我的进阶版点此前往 适用情况 首先说明,此情况不具备普遍性.若你的情况与笔者类似那么希望这篇文章能够帮到你. 我的项目情况是这样的:用node.js做后台,ejs做模板引 ...

  10. Maven项目pom文件设置JDK版本

    maven项目创建之后有时候默认设定了java的低版本,每次导入项目或者更新maven的时候可能或出现一些报错,在pom.xml设定版本免除这个问题 <build> <finalNa ...