Below I will share with you an article on how to implement tab switching and style switching in Vue. It has a good reference value and I hope it will be helpful to everyone.
The example is as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; list-style: none } #app { width: 504px; height: 300px; margin: 100px auto; border: 1px solid #000; } ul { overflow: hidden; } li { width: 100px; height: 50px; float: left; text-align: center; line-height: 50px; border-bottom: 1px solid #000; border-right: 1px solid #000; } li:nth-child(5) { border-right: none; } .cur { height: 51px; background: blue; border-bottom: none; } </style> </head> <body> <p id="app"> <ul> <li v-for="(num,index) in nums" :class="{cur:iscur==index}" @click="iscur = index,tab('text'+(index+1))"> {{num.t}} </li> </ul> <p class="box"> <component :is='currentView' keep-alive></component> </p> </p> <script src="vue.js"></script> <script> const text1 = Vue.component('text1', {template: `<p><h1>Text111111111111</h1></p>`}); const text2 = Vue.component('text2', {template: `<p><h1>Text222222222222</h1></p>`}); const text3 = Vue.component('text3', {template: `<p><h1>Text333333333333</h1></p>`}); const text4 = Vue.component('text4', {template: `<p><h1>Text444444444444</h1></p>`}); const text5 = Vue.component('text5', {template: `<p><h1>Text555555555555</h1></p>`}); var vm = new Vue({ el: "#app", data: { currentView: text1, nums: [{t: "text1"}, {t: "text2"}, {t: "text3"}, {t: "text4"}, {t: "text5"}], iscur: 0 }, methods: { tab(tabText){ this.currentView = tabText; } } }) </script> </body> </html>
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Use js to realize front and back transfer Json sample code
Vue converts the string with html field passed from the background into HTML
The above is the detailed content of vue implements tab switching plus style switching method. For more information, please follow other related articles on the PHP Chinese website!