经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue实现简单选项卡功能
来源:jb51  时间:2022/3/1 13:39:35  对本文有异议

本文实例为大家分享了Vue实现简单选项卡的具体代码,供大家参考,具体内容如下

vue-tab-demo

App.vue

  1. <template>
  2. ? <div id="app">
  3. ? ? <Tab/>
  4. ? </div>
  5. </template>
  6.  
  7. <script>
  8. import Tab from './components/Tab'
  9.  
  10. export default {
  11. ? name: 'App',
  12. ? components: {
  13. ? ? Tab
  14. ? }
  15. }
  16. </script>
  17.  
  18. <style>
  19. ? ul, li {
  20. ? ? list-style: none;
  21. ? }
  22. ? .clearfix {
  23. ? ? zoom: 1;
  24. ? }
  25. ? .clearfix:after {
  26. ? ? display: block;
  27. ? ? content: '';
  28. ? ? clear: both;
  29. ? }
  30. </style>

先布局,写好样式
Tab.vue

  1. <template>
  2. <div id="tab">
  3. ? <div class="tab-bar clearfix">
  4. ? ? <a href="javascript:;">HTML</a>
  5. ? ? <a href="javascript:;">CSS</a>
  6. ? ? <a href="javascript:;">JavaScript</a>
  7. ? ? <a href="javascript:;" class="active">Vue</a>
  8. ? </div>
  9. ? <div class="tab-con">
  10. ? ? <div>HTML</div>
  11. ? ? <div>CSS</div>
  12. ? ? <div>JavaScript</div>
  13. ? ? <div class="light">Vue</div>
  14. ? </div>
  15. </div>
  16. </template>
  17.  
  18. <script>
  19. export default {
  20. ? ? data () {
  21. ? ? ? return {
  22.  
  23. ? ? ? }
  24. ? ? },
  25. ? ? methods: {
  26.  
  27. ? ? }
  28. }
  29. </script>
  30.  
  31. <style scoped>
  32. #tab {
  33. ? width: 400px;
  34. ? border: 1px solid #ccc;
  35. ? margin: 60px auto 0;
  36. }
  37. .tab-bar {
  38. ? width: 400px;
  39. ? background-color: #ccc;
  40. }
  41. .tab-bar a {
  42. ? float: left;
  43. ? width: 100px;
  44. ? height: 40px;
  45. ? line-height: 40px;
  46. ? text-align: center;
  47. ? text-decoration: none;
  48. ? color: #000;
  49. }
  50. .tab-con div {
  51. ? text-align: left;
  52. ? height: 100px;
  53. ? display: none;
  54. }
  55.  
  56.  
  57. .tab-bar .active {
  58. ? background-color: #0099ff;
  59. }
  60. .tab-con .light {
  61. ? display: block;
  62. }
  63. </style>

渲染数据后,上面Tab.vue修改后如下:

  1. <template>
  2. ? <div id="tab">
  3. ? ? <div class="tab-bar clearfix">
  4. ? ? ? <a href="javascript:;"
  5. ? ? ? ? ?@click="tab(index)"
  6. ? ? ? ? ?v-for="(item,index) in items"
  7. ? ? ? ? ?:class="{active : index===curId}"
  8. ? ? ? >{{item.item}}</a>
  9. ? ? </div>
  10. ? ? <div class="tab-con">
  11. ? ? ? <div
  12. ? ? ? ? v-show="index===curId"
  13. ? ? ? ? v-for="(content, index) in contents" >{{content.content}}</div>
  14. ? ? </div>
  15. ? </div>
  16. </template>
  17.  
  18. <script>
  19. ? export default {
  20. ? ? data () {
  21. ? ? ? return {
  22. ? ? ? ? curId: 0,
  23. ? ? ? ? items: [
  24. ? ? ? ? ? {item: 'HTML'},
  25. ? ? ? ? ? {item: 'CSS'},
  26. ? ? ? ? ? {item: 'JavaScript'},
  27. ? ? ? ? ? {item: 'Vue'},
  28. ? ? ? ? ],
  29. ? ? ? ? contents: [
  30. ? ? ? ? ? {content: 'HTML'},
  31. ? ? ? ? ? {content: 'CSS'},
  32. ? ? ? ? ? {content: 'JavaScript'},
  33. ? ? ? ? ? {content: 'Vue'},
  34. ? ? ? ? ]
  35. ? ? ? }
  36. ? ? },
  37.  
  38. ? ? methods: {
  39. ? ? ? tab (index) {
  40. ? ? ? ? this.curId = index;
  41. ? ? ? }
  42. ? ? }
  43. ? }
  44. </script>
  45.  
  46. <style scoped>
  47. ? #tab {
  48. ? ? width: 400px;
  49. ? ? border: 1px solid #ccc;
  50. ? ? margin: 60px auto 0;
  51. ? }
  52. ? .tab-bar {
  53. ? ? width: 400px;
  54. ? ? background-color: #ccc;
  55. ? }
  56. ? .tab-bar a {
  57. ? ? float: left;
  58. ? ? width: 100px;
  59. ? ? height: 40px;
  60. ? ? line-height: 40px;
  61. ? ? text-align: center;
  62. ? ? text-decoration: none;
  63. ? ? color: #000;
  64. ? }
  65. ? .tab-bar .active {
  66. ? ? background-color: #0099ff;
  67. ? }
  68. ? .tab-con div {
  69. ? ? text-align: left;
  70. ? ? height: 100px;
  71. ? }
  72.  
  73. </style>

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号