观看大佬视频总结的一个tab切换功能
<template>
<div>
<p class="tabs" v-for="(list,index) in lists"
:class="index == cur ? 'red':''"
@click="cur=index">
{{list.title}}
</p>
<div class="content" v-for="(list,index) in lists" :style="{display: index==cur ? 'block':'none'}">
{{list.name}}
</div>
</div>
</template>
<script>
export default {
data () {
return {
lists: [
{
title: "切换1",
name: "内容1111"
},
{
title: "切换2",
name: "内容2222"
}
],
cur: 0
}
}
}
</script>
<style scoped>
.tabs {
display: inline-block;
margin-left:10px;
}
.red {
color: red;
}
.content {
padding: 5px;
}
</style>