css vue 选项卡_Vue选项卡案例

选项卡

运行效果

原理分析和实现

1、动态切换class

2、v-show，根据表达式之真假值，切换元素的 display CSS 属性。

下面直接进入正题

完整代码

css部分

*{

margin: 0;

padding: 0;

}

#box{

width: 600px;

margin: 0 auto;

}

.tab-tit{

font-size: 0;

width: 600px;

}

.tab-tit a{

display: inline-block;

height: 50px;

line-height: 50px;

width: 25%;

font-size: 18px;

text-align: center;

background: #ccc;

color: #333;

text-decoration:none;

}

.tab-tit .cur{

background: #09f;

color: #fff;

}

.tab-con div{

border: 1px solid #ccc;

height: 400px;

width: 598px;

margin: 0 auto;

padding-top: 20px;

}

HTML部分(视图)

html

css

javascript

vue

html

css

javascript

vue

JavaScript部分(模型)

new Vue({

el: '#box',

data: {

msg: 0

}

})

喜欢的可以点赞加收藏