在vue中实现tab栏的功能
如图
代码如下（css样式我并没有去细细布置，重点在于功能的实现）：
<body>
<div id="app">
<ul>
<!-- v-bind:属性 可以直接省略为:属性 -->
<li v-for="(item,index) in list" :class="{current:index==num}" @click="change(index)">{{item}}</li>
</ul>
<main>
<div v-for="(item,index) in list" v-show="num==index">{{item}}</div>
</main>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
num:0,
list:['新闻','娱乐','新闻','娱乐'],
con:['新闻内容','娱乐内容','新闻内容','娱乐内容']
},
methods:{
change(n){
this.num=n;
}
}
})
</script>
</body>
</html>
扫一扫
2064
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
