综合运用vue基本语法完成简单的选项卡
基本的html的样式
<style>
.tab ul{
overflow: hidden;
padding: 0;
margin: 0;
}
.tab ul li{
box-sizing: border-box;
padding: 0;
float:left;
width: 100px;
height: 45px;
line-height: 45px;
list-style: none;
text-align: center;
border-top:1px solid blue;
border-right:1px solid blue;
cursor: pointer;
}
.tab ul li:first-child{
border-left: 1px solid blue;
}
.tab ul li.active{
background: orange;
}
.tab div{
width: 500px;
height: 300px;
display: none;
text-align: center;
font-size: 30px;
line-height: 300px;
border: 1px solid blue;
border-top: 0;
}
.tab div.meet{
display:block;
}
</style>
html
<div id="test">
<div class="tab">
//v-for动态渲染
//给li标签套嵌v-on:click
<ul>
<li v-on:click="change(index)" v-for="(item ,index ) in list" :key="index" :class="tabIndex === index ? 'active':'' ">
{{item.title}}</li>
</ul>
<div :class="tabIndex === index ? 'meet':'' " v-for="(item,index) in list">
<img :src="item.path">
</div>
</div>
</div>
运用vue操控
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#test',
data:{
tabIndex:0,
list:[{title:'vue',path:'https://cn.vuejs.org/images/logo.png'},
{title:'vant',path:'https://cn.vuejs.org/images/vant.png'},
{title:'HBuliderX',path:'https://cn.vuejs.org/images/dcloud.gif'}],
},methods:{
change:function(index){
this.tabIndex=index
}
}
})
</script>
大体的样子: