用vue写一个选项卡

先不要说话，先看个图片 ⇀_⇀

还是看代码把

html

<div class="box" style="width:300px;">
<div class="tab-hd">
<a href="javascript:;" :class="{'now':index==1}" @click="index=1">111</a>
<a href="javascript:;" :class="{'now':index==2}" @click="index=2">222</a>
<a href="javascript:;" :class="{'now':index==3}" @click="index=3">333</a>
</div>
<div class="tab-bd">
<div class="tab-item" v-show="index==1">1111111</div>
<div class="tab-item" v-show="index==2">222222</div>
<div class="tab-item" v-show="index==3">333333</div>
</div>
</div>

css

.tab-hd { position: relative; height:36px; margin:15px 0; border-bottom:1px solid #ddd; }
.tab-hd a { float:left; padding:8px 20px; margin-right:-1px; background: #fbfaf8; border:1px solid #ddd; }
.tab-hd a:hover { background: #fff; }
.tab-hd .now { padding: 8px 20px 7px; border-top:2px solid #4998df; border-bottom:1px solid #fff; background: #fff; z-index: 2; }

javascript

//vue得先进来吧
<script src="vue.js"></script>
<script type="text/javascript">
var v = new Vue({
el : '#box',
data : {
index : 1
}
});
</script>

转载于:https://my.oschina.net/imsole/blog/1637882

• 点赞
• 收藏
• 分享
• 文章举报