本节案例利用vue
制作一个tab
切换效果
1、效果图
2、基本的页面代码
<div class="hello"> <div class="btn-group"> <button v-for="(item,index) in btn" v-bind:class="{active:(indexs==index)}" v-on:click="a(index)" :key="index">{{item}}</button> </div> <div class="wrap"> <div v-for="(w,key,index) in box" v-if="indexs == index" :key="index">{{w}}-{{key}}</div> </div> </div>
3、
js
代码<script> export default { data() { return { btn: ['按钮1','按钮2','按钮3'], box: { aa: "tab切换1", bb: "tab切换2", cc: "tab切换3" }, indexs: 0, } }, methods: { a(str) { this.indexs = str; } } } </script>
4、样式文件
.btn-group{ width:50%; margin: 0 auto; } button{ border:none; width: 50px; height: 30px; } .wrap div { width: 100%; height: 300px; background-color: #0cc; } .active { background-color: red }