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: 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: 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>
posted @ 2019-04-18 11:33  Alitar  阅读(1357)  评论(0)  编辑  收藏  举报