html选项卡_Vue 实现TAB选项卡

最新推荐文章于 2024-09-22 14:11:19 发布

weixin_39766258

最新推荐文章于 2024-09-22 14:11:19 发布

阅读量268

点赞数

文章标签： html选项卡

学习 Vue 有一段时间了，通过做一些小 demo 来检测自己的真实水平。Vue 采用的面向数据的编程方式（MVVM），最开始还总是逃离不开 MVP 的逻辑，总是忍不住去对 DOM 进行编码，即便是网上搜索用 Vue 来实现选项卡，也有很多人是对 DOM 进行操作，而不是对数据进行操作，简直是在用 MVP 来写 Vue 啊！近段时间才开始对 MVVM 颇有体会。以下是使用 Vue 来实现选项卡的代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>选项卡</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
      .active {
        color: red;
      }

      .activatedOne {
        width: 200px;
        height: 200px;
        background: #ccc;
        border: 1px solid #999;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <btn-item @click.native="handleItemChange(index)" v-for="(item,index) in btnList" :item="item" :class="{active: index===nowIndex}"></btn-item>
      <div-item v-for="(item,index) in divList" :item="item" class="activatedOne" v-show="nowIndex===index"></div-item>
    </div>

    <script>
      var btnItem = {
        props: ['item'],
        template: '<button>{{item}}</button>'
      }

      var divItem = {
        props: ['item'],
        template: '<div>{{item}}</div>'
      }

      var vm = new Vue({
        el: '#root',
        components: {
          btnItem,
          divItem
        },
        data: {
          btnList: ['教育','培训','招生','出国'],
          divList: [111,222,333,444],
          nowIndex: 0
        },
        methods: {
          handleItemChange(index) {
            this.nowIndex = index
          }
        }
      })
    </script>
  </body>
</html>

以下是页面展示图：

最开始做选项卡时，是为了练下 Vue 中的样式绑定，即通过改变数据来改变样式。在过程中，遇到不知道如何去修改数据，让对应的元素可以显示 acitve 样式，然后还可以让对应的 div 可以显示出来。因为之前总想着去遍历数组，对 DOM 进行操作。但后来在网上看到一个示例，即通过 nowIndex 这个中间变量，接着通过改变 nowIndex 就可以解决上述问题。

这其中的 Vue 知识点有：插值表达式、创建子组件、v-show、v-bind、v-on、v-for、Vue 中的样式绑定、父子组件传值

进一步简化模版：可以将模版中的逻辑代码放在计算属性中。

只有在做项目练习时，才能对知识点有更好的吸收，以及查漏补缺，即便在当时没有做出来，也可以带着问题和思考去学新的知识点，如此就进入了主动学习的模式。我觉得学习从来都不能图快，就像看书一样，不能说每天看几页，还要对看书的效果有要求，还要带着问题和思考去看书，最重要的是对于好书还是重复看，而不是说一本接一本快速地看新书。那么怎么保证整体的效率而不会进入到“时间莫名流逝”的状态中呢？比如在编程的过程中，在遇到问题后也很容易进入“时间莫名流逝”的状态，就是还没有做啥事，几个小时就过去了。我找到了有效的方法——正确使用清单。

很多人为了更好地去行动而去列清单，将很多要做的事都列在清单上，然后根据感觉（更多的是紧迫感）去制定优先级，然后大多数人都没有根据清单去行动，还是过着以往的生活。实际上我们列清单的原始目的是为了按照自己的意愿去生活，也就是说认真地制定清单不是为了行动，而是为了实现目标！因为只有实现一个一个目标，我们才能过上自己想要的生活。

要先有目标才能制定一个好的清单！因为在为清单列优先级时只有一个标准：那就是能帮助实现目标的事项就是重要事项！其他的在这个时间段都不重要！而所谓的有紧迫感的事项其实大多数都不是真正的紧急事项，比如我们大多数人都有拖延症，以前就有很多感觉紧迫的事项都没有按时完成，那结果也没怎么样嘛！所以只有重要事项才是需要花大量的精力和时间去投入的，而清单就是为了让我们的行动和精力都放在重要事项上！有以下几点建议：

1、制定目标，并且拆解目标到最小的可行动的单位，比如在两个小时内、在一个小时内或者半个小时内可以完成的单位，这是为了给每一个小任务更好的划分时间，也是为了可以更容易去执行；

2、将每一个单位任务分别提上日程，在早上选择某些单位任务，然后分别划分时间段，这就是需要先估计大概需要多久的完成时间，这么做的好处是明显的，到了要做任务的时间后，你不会再思考接下来要做什么？如果想娱乐，比如看某部电影，赶快告诉自己，做完今天的重要事项后就可以犒劳自己了。

3、在行动中一定会遇到各种各样的阻碍，将这些阻碍具体写下来；

4、在晚上总结时，做一个检查清单，要诊断问题和分析根源，即一旦遇到什么问题，可以怎么样做，或者你需要调整现有的清单。比如在编程时遇到问题，容易进入到“时间莫名流逝”的状态，那么你需要为自己做一个解决问题的流程清单，根据自己容易犯的错误去针对性的制定解决方案，比如我总是喜欢乱猜、乱试，所以我在清单上就写：

1、遇到某个具体问题时，在谷歌搜素具体的问题（防止自己还在乱试，防止自己钻牛角尖）；
2、做这个 Demo 总共只有 30 分钟的时间（防止自己进入到“时间莫名流逝”的状态，让注意力集中在要解决的事情上）；
3、当还没有解决这个问题时，马上将问题和当时的解决思路记录下来，放到以后学到新知识后再解决（带着问题和思考更好地学习新的知识）；
4、然后按照进度去做接下来的事情（不会阻断当天的计划进度）。

还有一点无论是制定目标的数量，或者每天给自己安排事项的数量，都一定要在自己可管理的范围内，切记贪婪！因为你会发现每天能做的事情并不多，但是如果你能坚持三个月、半年、一年，直到实现目标，我们不仅知道了我们羡慕的、敬佩的成功者的秘密，也真的有了成为成功者的能力。