当前位置:Gxlcms > JavaScript > Vue.js tab实现选项卡切换

Vue.js tab实现选项卡切换

时间:2021-07-01 10:21:17 帮助过:6人阅读

本文为大家分享了Vuejs 组件化开发tab组件实例,供大家参考,具体内容如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>index</title>
  6. <link rel="stylesheet" href="css/index.css" >
  7. <script type="text/javascript" src="../lib/vue.min.js"></script>
  8. <script type="text/javascript" src="../lib/jquery-1.11.3.min.js"></script>
  9. <style>
  10. * {
  11. margin: 0;
  12. padding: 0;
  13. }
  14. #tabPanel .itemname {
  15. height: 40px;
  16. width: 180px;
  17. margin-bottom: 10px;
  18. }
  19. #tabPanel .itemcontent {
  20. height: 40px;
  21. width: 180px;
  22. }
  23. #tabPanel .addbtn {
  24. margin: 10px 0 0 95px;
  25. width: 185px;
  26. height: 40px;
  27. }
  28. #tabPanel .active {
  29. background: #eee;
  30. }
  31. #tabPanel {
  32. height: 340px;
  33. width: 500px;
  34. margin: 100px auto;
  35. }
  36. #tabPanel .tab {
  37. height: 40px;
  38. background: #ccc;
  39. margin-top: 10px;
  40. }
  41. #tabPanel .tab ul li {
  42. list-style: none;
  43. float: left;
  44. width: 80px;
  45. height: 40px;
  46. text-align: center;
  47. line-height: 40px;
  48. }
  49. #tabPanel .content {
  50. height: 300px;
  51. width: 500px;
  52. background: #eee;
  53. }
  54. </style>
  55. </head>
  56. <body>
  57. <div id="tabItem">
  58. <my-tab></my-tab>
  59. <my-tab></my-tab>
  60. </div>
  61. <!--组件模板-->
  62. <script type="text/template" id="tab">
  63. <div id="tabPanel">
  64. <label>添加滑块名称:<input type="text" v-model="tabItem" class="itemname"></label><br>
  65. <label>添加滑块内容:<input type="text" v-model="tabContent" class="itemcontent"></label><br>
  66. <input type="button" value="添加选项" @click="addItem()" class="addbtn">
  67. <div class="tab">
  68. <ul>
  69. <li v-for="(value, index) in tabs" v-bind:class="{active: index == num }" @mouseover="toggle(index)" @dblclick="del(index)">{{value}}</li>
  70. </ul>
  71. </div>
  72. <div class="content">
  73. <div class="box" v-for="(value, index) in tabContents" v-show="index == num" contenteditable="true" @blur="editContent(index,value)">{{value+index}}</div>
  74. </div>
  75. </div>
  76. </script>
  77. <!--组件模板-->
  78. </body>
  79. </html>
  80. <script>
  81. var vue = new Vue({
  82. el: "#tabItem",
  83. data: {
  84. },
  85. components: {
  86. 'my-tab': {
  87. template: '#tab',
  88. data: function() {
  89. return {
  90. tabs: ["第一项", "第二项"],
  91. tabContents: ["第一项内容", "第二项内容"],
  92. num: 0,
  93. tabItem: "",
  94. tabContent: ""
  95. }
  96. },
  97. methods: {
  98. //切换滑块
  99. toggle: function(index) {
  100. this.num = index;
  101. },
  102. //添加滑块
  103. addItem: function() {
  104. if (this.tabItem == "" || this.tabContent == "") {
  105. alert("填写完整的名称和内容");
  106. } else {
  107. this.tabs.push(this.tabItem);
  108. this.tabContents.push(this.tabContent);
  109. }
  110. },
  111. //双击删除滑块
  112. del: function(index) {
  113. this.tabs.splice(index, 1);
  114. this.tabContents.splice(index, 1)
  115. },
  116. //编辑选项内容
  117. editContent: function(index, value) {
  118. this.tabContents[index] = value;
  119. console.log(this.tabContents);
  120. }
  121. }
  122. }
  123. }
  124. });
  125. </script>

如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

人气教程排行