<!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. 二维码神器QRCoder

    好久没有写Blog,都是因为不小心坠入了爱河,时间都给我家那位了,都没时间加班了(嗨呀,不小心撒了一下狗粮),不过,还是希望单身的赶紧找到心仪的另一半,实在找不到,那就加班啊(开个玩笑,别认真). 二 ...

  2. 从壹开始微服务 [ DDD ] 之终篇 ║当事件溯源 遇上 粉丝活动

    回首 哈喽~大家好,时间过的真快,关于DDD领域驱动设计的讲解基本就差不多了,本来想着周四再开一篇,感觉没有太多的内容了,剩下的一个就是验证的问题,就和之前的JWT很类似,就不打开一个章节了,而且这个 ...

  3. 请给你的短信验证码接口加上SSL双向验证

    序言 去年年底闲来几天,有位同事专门在网上找一些注册型的app和网站,研究其短信接口是否安全,半天下来找到30来家,一些短信接口由于分析难度原因,没有继续深入,但差不多挖掘到20来个,可以肆意被调用, ...

  4. netcore编程之后面对不习惯的xshell黑屏部署，是时候使用jenkins自动化发布工具了

     在很久之前net还只能在windows上部署的时候,或许很多创业公司的朋友发布项目还都是人肉部署,反正windows都是可视化的界面,拖拖拉拉,开开关关还不 是特别麻烦...现如今你的项目需要在li ...

  5. 【野草】SQL Server之索引解析（一）

    1.写在前面 微软专门给出SQL Server设计思路及实现路线,从7大体系结构阐述是如何实现,通过了解这些,我们就可以总结出数据库设计原则.编程中sql写法及注意事项,从而优化我们的系统性能,本系列 ...

  6. 兼容性：Adapter（适配器模式）【PHP】

    Adapter(适配器模式) ---- 加个“适配器”以便于复用 将一个类的接口转换成客户希望的另一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. 应用场景 如果 ...

  7. box-shadow内阴影、外阴影

    外阴影: box-shadow:X轴  Y轴  Rpx  color; 属性说明(顺序依次对应):阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值(大小) 阴影的颜色 内阴影: bo ...

  8. 对 MES 感兴趣？赶紧看过来！

    在知乎许久都没有智能制造话题,索性自己在 2018-06-08 创建了智能制造话题,在创建话题过程中也遇到些麻烦,最终联系了知乎小管家,成功创建了该话题.目前过去7个月了,该话题的关注人数有820人了 ...

  9. Soot生成代码控制流图

    Soot可以对代码进行分析,提供了多种字节码分析和变换功能,通过它可以进行过程内和过程间的分析优化,以及程序流图的生成,还能通过图形化的方式输出. http://www.brics.dk/SootGu ...

  10. SqlServer 递归查询

    --查询部门及下属部门列表 WITH TEMP --递归 AS (SELECT Id, Code, Name, ParentId FROM [dbo].[AspSysDepartments] --查询 ...