vue实现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>