Vue实现选项卡切换
Posted 乐得逍遥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue实现选项卡切换相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<script src="../js/vue.js"></script>
<style>
li{
list-style: none;
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="app">
<ul>
<li v-for="(item,index) in list" @click="tab(index)">{{item.tab}}
<div v-show="item.show">
{{item.title}}
</div>
</li>
</ul>
</div>
<script>
let obj=[
{"tab":"选项一","show":true,"title":"1111"},
{"tab":"选项二","show":false,"title":"2222"},
{"tab":"选项三","show":false,"title":"3333"}
];
var vm=new Vue({
el:".app",
data:{
list:obj
},
methods:{
tab:function(index){
for(var i=0;i<this.list.length;i++){
this.list[i].show=false;
if(i==index){
this.list[index].show=true;
}
}
}
}
})
</script>
</body>
</html>
以上是关于Vue实现选项卡切换的主要内容，如果未能解决你的问题，请参考以下文章