Simple implementation process:
Achieved by v-for tab tab tab achieved by switching @click, by: class binding achieved this page, tab switching component to achieve mainly rely on components, each tab to switch, do not want to change the tab content, you can use keep-alive achieve. Specific code as follows:
<template> <div id="app"> <div class="radio-wrap"> <div class="radio-group" v-model="tabView"> <span v-for="(tab ,index) in tabs" :class="{cur:iscur==index}" @click="iscur=index,tabChange('select' + (index + 1))"> {{tab.name}} </span> </div> <div style="margin:10px 0;"></div> <keep-alive> <component v-bind:is="tabView"></component> </keep-alive> </div> </div> </template> <script> import select1 from './components/select01.vue'; import select2 from './components/select02.vue'; import select3 from './components/select03.vue'; export default { name: 'app', data () { return { tabView: 'select1', iscum: 0 tabs: [{name: "Option 1"}, {name: "Option 2"}, {name: "Option 3"}] } }, components: { select1, select2, select3 }, methods: { tabChange:function(tab){ this.tabView = tab; } } } </script>