使用vue.js简单的tab选项卡效果

来源：互联网发布：银河证券量化交易软件编辑：程序博客网时间：2024/05/16 04:36

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/vue.js"></script>
<style>
.tab_box div{
width: 200px;
height: 200px;
border:1px solid #000;
line-height: 200px;
}
</style>
</head>
<body>

<div id="tab">

<input v-for="(b,index) in tabs" type="button" :value="b.btn" v-on:click="show(index)">
<div class="tab_box">
<div v-for="(t,index) in desc" v-bind:data-index="index" v-show="index==current">{{t.text}}</div>
</div>
</div>
<script>
var app=new Vue({
el:'#tab',
data:{
message:'你好',
current:0,
tabs:[
{btn:'按钮1'},
{btn:'按钮2'},
{btn:'按钮3'},
{btn:'按钮4'},
],
desc:[
{text:'文字描述一'},
{text:'文字描述二'},
{text:'文字描述三'},
{text:'文字描述四'},
]
},
methods:{
show:function (index) {
this.current=index;
}
}
})
</script>
</body>
</html>

阅读全文

0 0