vue实现tab切换外加样式切换方法

2024-05-06 15:20:37

字体：大中小

来源：转载

供稿：网友

实例如下所示：

<!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><div 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> <div class="box">  <component :is='currentView' keep-alive></component> </div></div><script src="vue.js"></script><script> const text1 = Vue.component('text1', {template: `<div><h1>Text111111111111</h1></div>`}); const text2 = Vue.component('text2', {template: `<div><h1>Text222222222222</h1></div>`}); const text3 = Vue.component('text3', {template: `<div><h1>Text333333333333</h1></div>`}); const text4 = Vue.component('text4', {template: `<div><h1>Text444444444444</h1></div>`}); const text5 = Vue.component('text5', {template: `<div><h1>Text555555555555</h1></div>`}); 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>

以上这篇vue实现tab切换外加样式切换方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持错新站长站。

上一篇：NodeJS实现不可逆加密与密码密文保存的方法

下一篇：javaScript中＂==＂和＂===＂的区别详解